From 05c0ab1db24f1a48b53f06ae1de9eeb74b07d268 Mon Sep 17 00:00:00 2001 From: lin-xin <2981207131@qq.com> Date: Wed, 18 Apr 2018 08:58:54 +0800 Subject: [PATCH] =?UTF-8?q?'=E5=A2=9E=E5=8A=A0=E8=A1=A8=E6=A0=BC=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=92=8C=E5=88=A0=E9=99=A4=E6=93=8D=E4=BD=9C'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/components/page/BaseTable.vue | 133 ++++++++++++++++++++++-------- 2 files changed, 98 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index ccc23ce..1b2bd7a 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ vue-manage-system | 基于Vue 的后台管理系统 - + diff --git a/src/components/page/BaseTable.vue b/src/components/page/BaseTable.vue index 7501cbe..44a4539 100644 --- a/src/components/page/BaseTable.vue +++ b/src/components/page/BaseTable.vue @@ -26,21 +26,45 @@ + + + + + + + + + + + + + + + + + 取 消 + 确 定 + + + + + +
删除不可恢复，是否确定删除？
+ + 取 消 + 确 定 + + @@ -55,27 +79,35 @@ select_cate: '', select_word: '', del_list: [], - is_search: false + is_search: false, + editVisible: false, + delVisible: false, + form: { + name: '', + date: '', + address: '' + }, + idx: -1 } }, - created(){ + created() { this.getData(); }, computed: { - data(){ + data() { return this.tableData.filter((d) => { let is_del = false; for (let i = 0; i < this.del_list.length; i++) { - if(d.name === this.del_list[i].name){ + if (d.name === this.del_list[i].name) { is_del = true; break; } } - if(!is_del){ - if(d.address.indexOf(this.select_cate) > -1 && + if (!is_del) { + if (d.address.indexOf(this.select_cate) > -1 && (d.name.indexOf(this.select_word) > -1 || - d.address.indexOf(this.select_word) > -1) - ){ + d.address.indexOf(this.select_word) > -1) + ) { return d; } } @@ -84,21 +116,23 @@ }, methods: { // 分页导航 - handleCurrentChange(val){ + handleCurrentChange(val) { this.cur_page = val; this.getData(); }, // 获取 easy-mock 的模拟数据 - getData(){ + getData() { // 开发环境使用 easy-mock 数据，正式环境使用 json 文件 - if(process.env.NODE_ENV === 'development'){ + if (process.env.NODE_ENV === 'development') { this.url = '/ms/table/list'; }; - this.$axios.post(this.url, {page:this.cur_page}).then((res) => { + this.$axios.post(this.url, { + page: this.cur_page + }).then((res) => { this.tableData = res.data.list; }) }, - search(){ + search() { this.is_search = true; }, formatter(row, column) { @@ -108,37 +142,64 @@ return row.tag === value; }, handleEdit(index, row) { - this.$message('编辑第'+(index+1)+'行'); + this.idx = index; + const item = this.tableData[index]; + this.form = { + name: item.name, + date: item.date, + address: item.address + } + this.editVisible = true; }, handleDelete(index, row) { - this.$message.error('删除第'+(index+1)+'行'); + this.idx = index; + this.delVisible = true; }, - delAll(){ + delAll() { const length = this.multipleSelection.length; let str = ''; this.del_list = this.del_list.concat(this.multipleSelection); for (let i = 0; i < length; i++) { str += this.multipleSelection[i].name + ' '; } - this.$message.error('删除了'+str); + this.$message.error('删除了' + str); this.multipleSelection = []; }, handleSelectionChange(val) { this.multipleSelection = val; + }, + // 保存编辑 + saveEdit() { + this.$set(this.tableData, this.idx, this.form); + this.editVisible = false; + this.$message.success(`修改第 ${this.idx+1} 行成功`); + }, + // 确定删除 + deleteRow(){ + this.tableData.splice(this.idx, 1); + this.$message.success('删除成功'); + this.delVisible = false; } } } + \ No newline at end of file + .handle-box { + margin-bottom: 20px; + } + + .handle-select { + width: 120px; + } + + .handle-input { + width: 300px; + display: inline-block; + } + .del-dialog-cnt{ + font-size: 16px; + text-align: center + } + -- GitLab