1、vue-element-admin+Elementui實現(xiàn)增刪改查模板頁基本元素（展以及增刪改查的按鈕） row.vname row.startTime | dateFilter row.endTime | dateFilter el-button v-if=row.status = 0 | row.status=1 | row.status=2關閉確認定義data數(shù)據(jù)和過濾function dateIfAddZero(time) / 過濾時間的法return time 10 ? 0 + time : timeexport default filters: dateFilter(date) /

2、 定義時間過濾var date = new Date(new Date(date).getTime() / 中國標準時間const year = date.getFullYear()const month = dateIfAddZero(date.getMonth() + 1)const day = dateIfAddZero(date.getDate()const hours = dateIfAddZero(date.getHours()const minutes = dateIfAddZero(date.getMinutes()const seconds = dateIfAddZero(d

3、ate.getSeconds()return year + - + month + - + day + + hours + : + minutes + : + seconds,statusFilter(status) / 定義樣式過濾const statusMap = 0: success,1: danger,2:inforeturn statusMapstatus,data() return groupList: type: 0,name: , / 定義下拉框type: 1, name: ,datalist: null, /listuserList:, /list接收后臺集合，做下拉框tot

4、al: 0, /0條記錄listLoading: true, /默認加載listQuery: /定義分頁查詢的條件pageNum: 1,total: 0,uname: /條件查詢的條件字段,dialogStatus: , /定義添加和修改create or updatedialogStatus: , /定義添加和修改create or updateuid: required: true, message: , trigger: change ,vid: required: true, message: , trigger: blur ,textMap: /添加和編輯的標題temp: id: ,

5、name: ,type: 基本的增刪改查法methods: getList() getVoucherBagList(this.listQuery.pageNum,this.listQuery.pageSize,this.listQuery.uname).then(response = this.datalist = response.data.voucherBagListthis.listQuery.total = response.data.totalthis.userList=response.data.userListthis.voucherList=response.data.vouc

6、herListsetTimeout() = / Just to simulate the time of the requestthis.listLoading = false, 0.5 * 1000),handleSizeChange(newSize) / 每頁條數(shù)改變時觸發(fā)console.log(newSize)this.listQuery.pageSize = newSizethis.getList(),handleCurrentChange(newPage) / 頁碼改變時觸發(fā)console.log(newPage)this.listQuery.pageNum = newPagethi

7、s.getList(),resetTemp() / 清空數(shù)據(jù)，定義內容this.temp = name: ,this.$refsdataForm.clearValidate()handleUpdate(row) / 點擊編輯this.temp = Object.assign(, row) / tempthis.dialogStatus = updatethis.dialogFormVisible = truethis.$nextTick() = this.$refsdataForm.clearValidate()type: success)this.getList() else this.$notify.error(title: ),updateData() / 修改this.$refsdataForm.validate(valid) = if (valid) updateVoucherBag(this.temp).then(response = if (response.code = 200) this.dialogFormVisible = falsethis.$notify(title: ,type: success)this.getList() else this.dialogFormVisible = falsethis.$notify