htm商城网站开发,ppt模板网站开发,济南网站建设开发,台州自助建站系统前端实现增删查改分页#xff0c;不调用后端。 大概就是对数组内的数据进行增删查改分页 没调什么样式#xff0c;不想写后端#xff0c;当做练习
templatediv!-- 查询 --el-form :inlinetrue :modelformQuery分页不调用后端。 大概就是对数组内的数据进行增删查改分页 没调什么样式不想写后端当做练习
templatediv!-- 查询 --el-form :inlinetrue :modelformQueryel-form-item label时间 :label-widthformLabelWidthel-date-pickerv-modelformQuery.datetypedaterangevalue-formatyyyy-MM-ddstart-placeholder开始日期end-placeholder结束日期:default-time[00:00:00, 23:59:59]/el-date-picker/el-form-itemel-form-item label姓名 :label-widthformLabelWidthel-inputv-modelformQuery.namestylewidth: 240pxplaceholderPlease inputclearable //el-form-itemel-form-item label地址 :label-widthformLabelWidthel-inputv-modelformQuery.addressstylewidth: 240pxplaceholderPlease inputclearable //el-form-itemel-form-itemel-button typeprimary clickquery()查询/el-button/el-form-itemel-form-itemel-button typesuccess clickadd() classaddButton添加/el-button/el-form-item/el-form!-- 表格展示 --el-table :datatableData.slice((currentPage-1)*pageSize,currentPage*pageSize) stylewidth: 100%el-table-column typeindex labelid width50 /el-table-column propdate labelDate width180 /el-table-column propname labelName width180 /el-table-column propaddress labelAddress /el-table-column label操作template slot-scopescope!--插槽知识点--el-button typeprimary clickonEdit(scope.$index)编辑/el-button!-- el-button typeprimary clickdialogFormEditVisible true编辑/el-button --!-- el-button typedanger clickonDelete(scope.$index)删除/el-button --!-- 删除二次确认 --el-popover placementtop width160 v-modelscope.row.visiblep确定删除吗/pdiv styletext-align: right; margin: 0el-button sizemini typetext clickscope.row.visible false取消/el-buttonel-button typeprimary sizemini clickonDelete(scope.$index)确定/el-button/divel-button slotreference typedanger删除/el-button/el-popover/template/el-table-column/el-table!-- 分页 --div classblock stylemargin-top: 15pxel-paginationaligncentersize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[1, 3, 5, 7]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltableData.length/el-pagination/div!-- 修改弹出框 --el-dialog :visible.syncdialogFormEditVisible title修改 width500el-form :modelformEditel-form-item label时间 :label-widthformLabelWidthel-date-pickerv-modelformEdit.datetypedateformatyyyy-MM-ddvalue-formatyyyy-MM-ddplaceholderPick a day //el-form-itemel-form-item label姓名 :label-widthformLabelWidthel-inputv-modelformEdit.namestylewidth: 240pxplaceholderPlease inputclearable //el-form-itemel-form-item label地址 :label-widthformLabelWidthel-inputv-modelformEdit.addressstylewidth: 240pxplaceholderPlease inputclearable //el-form-item/el-formtemplate #footerdiv classdialog-footerel-button clickdialogFormEditVisible falseCancel/el-buttonel-button typeprimary clickeditConfirm() Confirm /el-button/div/template/el-dialog!-- 添加弹出框 --el-dialog :visible.syncdialogFormAddVisible title添加 width500el-form :modelformAddel-form-item label时间 :label-widthformLabelWidthel-date-pickerv-modelformAdd.datetypedateformatyyyy-MM-ddvalue-formatyyyy-MM-ddplaceholderPick a day //el-form-itemel-form-item label姓名 :label-widthformLabelWidthel-inputv-modelformAdd.namestylewidth: 240pxplaceholderPlease inputclearable //el-form-itemel-form-item label地址 :label-widthformLabelWidthel-inputv-modelformAdd.addressstylewidth: 240pxplaceholderPlease inputclearable //el-form-item/el-formtemplate #footerdiv classdialog-footerel-button clickdialogFormAddVisible falseCancel/el-buttonel-button typeprimary clickaddConfirm() Confirm /el-button/div/template/el-dialog/div
/templatescript
import { Container } from element-ui;export default {name: practice,data() {return {tableData: [{date: 2024-05-03,name: Tom1,address: No. 11, Grove St, Los Angeles,},{date: 2024-06-02,name: Tom2,address: No. 22, Grove St, Los Angeles,},{date: 2024-03-04,name: Tom3,address: No. 33, Grove St, Los Angeles,},{date: 2024-03-21,name: Tom4,address: No. 44, Grove St, Los Angeles,},],currentPage: 1, // 当前页码total: 20, // 总条数pageSize: 3, // 每页的数据条数formQuery: {date: ,name: ,address: ,},dialogFormEditVisible: false,dialogFormAddVisible: false,formEdit: {date: ,name: ,address: ,},formAdd: {date: ,name: ,address: ,},formLabelWidth: 140px,num: ,};},methods: {// 添加add() {this.formAdd {};this.dialogFormAddVisible true;},addConfirm() {this.tableData.push(this.formAdd);this.dialogFormAddVisible false;},// 打开修改弹窗 回显onEdit(index) {// console.log(index);this.dialogFormEditVisible true;this.num index;// this.formEdit this.tableData[index]; 在修改弹窗中进行修改父表单的内容会被直接修改/*在你的代码中当点击修改按钮时通过onEdit方法打开弹窗并设置表单数据formEdit为tableData[index]。这里需要注意的是Vue.js 中对象是引用类型所以 this.formEdit this.tableData[index]; 实际上是将 formEdit 和 tableData[index] 引用了同一个对象。因此当你在弹窗中修改formEdit时同时也修改了tableData[index] 对应的对象导致父表单内容直接被修改了。为了避免这种情况你可以在 onEdit 方法中对 tableData[index] 进行深拷贝而不是简单地引用赋值。这样就可以保持弹窗中的表单数据和原始数据的独立性不会相互影响。你可以使用 Object.assign() 或者扩展运算符spread operator来进行深拷贝例如this.formEdit Object.assign({}, this.tableData[index]);// 或者this.formEdit { ...this.tableData[index] };这样修改后当你在弹窗中修改formEdit时不会影响到tableData中的数据直到点击确认按钮后才会将修改后的数据应用到tableData中。 */this.formEdit Object.assign({}, this.tableData[index]);},// 修改确认editConfirm() {this.tableData[this.num].date this.formEdit.date;this.tableData[this.num].name this.formEdit.name;this.tableData[this.num].address this.formEdit.address;this.dialogFormEditVisible false;},// 删除onDelete(index) {// splice(index, 1) 表示从 tableData 数组中删除一个元素从指定的 index 开始删除this.tableData.splice(index, 1);},//查询query() {// console.log(this.formQuery);var timeResult [];var addressResult [];var nameResult [];var startDate this.formQuery.date[0];var endDate this.formQuery.date[1];var address this.formQuery.address;var name this.formQuery.name;var date this.formQuery.date;// 判断日期if (date ! ) {for (let index 0; index this.tableData.length; index) {const element this.tableData[index];if (startDate element.date endDate element.date) {timeResult.push(this.tableData[index]);}}} else {timeResult this.tableData;}// 判断地址if (address ! ) {for (const iterator of timeResult) {if (iterator.address.includes(address)) {addressResult.push(iterator);}}} else {addressResult this.tableData;}// 判断姓名if (name ! ) {addressResult.forEach((element) {if (element.name.includes(name)) {nameResult.push(element);}});} else {nameResult this.tableData;}this.tableData nameResult;},// 分页//每页条数改变时触发 选择一页显示多少行handleSizeChange(val) {// console.log(每页 ${val} 条);this.pageSize val;// this.fetchData(this.currentPage);},//当前页改变时触发 跳转其他页handleCurrentChange(val) {// console.log(当前页: ${val});this.currentPage val;// this.fetchData(val);},},
};
/scriptstyle scoped
.el-button {margin-right: 10px;
}
/style
