优化表格代码

src/components/page/BaseTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="table">
+    <div>
         <div class="crumbs">
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item>
@@ -13,14 +13,14 @@
                     type="primary"
                     icon="el-icon-delete"
                     class="handle-del mr10"
-                    @click="delAll"
+                    @click="delAllSelection"
                 >批量删除</el-button>
-                <el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
+                <el-select v-model="selectCate" placeholder="筛选省份" class="handle-select mr10">
                     <el-option key="1" label="广东省" value="广东省"></el-option>
                     <el-option key="2" label="湖南省" value="湖南省"></el-option>
                 </el-select>
-                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
-                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+                <el-input v-model="selectWord" placeholder="筛选关键词" class="handle-input mr10"></el-input>
+                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
             </div>
             <el-table
                 :data="data"
@@ -78,7 +78,7 @@
                     :current-page="page.index"
                     :page-size="page.size"
                     :total="page.total"
-                    @current-change="handleCurrentChange"
+                    @current-change="handlePageChange"
                 ></el-pagination>
             </div>
         </div>
@@ -108,18 +108,17 @@ export default {
     data() {
         return {
             tableData: [],
-            cur_page: 1,
             multipleSelection: [],
-            select_cate: '',
-            select_word: '',
-            del_list: [],
+            delList: [],
+            selectCate: '',
+            selectWord: '',
             editVisible: false,
-            form: {},
             page: {
                 index: 1,
                 size: 10,
                 total: 50
             },
+            form: {},
             idx: -1,
             id: -1
         };
@@ -131,16 +130,16 @@ export default {
         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) {
+                for (let i = 0; i < this.delList.length; i++) {
+                    if (d.name === this.delList[i].name) {
                         is_del = true;
                         break;
                     }
                 }
                 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.selectCate) > -1 &&
+                        (d.name.indexOf(this.selectWord) > -1 || d.address.indexOf(this.selectWord) > -1)
                     ) {
                         return d;
                     }
@@ -149,26 +148,17 @@ export default {
         }
     },
     methods: {
-        // 分页导航
-        handleCurrentChange(val) {
-            this.cur_page = val;
-            this.getData();
-        },
         // 获取 easy-mock 的模拟数据
         getData() {
             fetchData({
-                page: this.cur_page
+                page: this.page.index
             }).then(res => {
                 this.tableData = res.list;
             });
         },
-        search() {},
-        handleEdit(index, row) {
-            this.idx = index;
-            this.id = row.id;
-            this.form = row;
-            this.editVisible = true;
-        },
+        // 触发搜索按钮
+        handleSearch() {},
+        // 删除操作
         handleDelete(index, row) {
             // 二次确认删除
             this.$confirm('确定要删除吗？', '提示', {
@@ -176,46 +166,41 @@ export default {
             })
                 .then(() => {
                     this.$message.success('删除成功');
-                    if (this.tableData[index].id === row.id) {
-                        this.tableData.splice(index, 1);
-                    } else {
-                        for (let i = 0; i < this.tableData.length; i++) {
-                            if (this.tableData[i].id === row.id) {
-                                this.tableData.splice(i, 1);
-                                return;
-                            }
-                        }
-                    }
+                    this.tableData.splice(index, 1);
                 })
                 .catch(() => {});
         },
-        delAll() {
+        // 多选操作
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        delAllSelection() {
             const length = this.multipleSelection.length;
             let str = '';
-            this.del_list = this.del_list.concat(this.multipleSelection);
+            this.delList = this.delList.concat(this.multipleSelection);
             for (let i = 0; i < length; i++) {
                 str += this.multipleSelection[i].name + ' ';
             }
             this.$message.error(`删除了${str}`);
             this.multipleSelection = [];
         },
-        handleSelectionChange(val) {
-            this.multipleSelection = val;
+        // 编辑操作
+        handleEdit(index, row) {
+            this.idx = index;
+            this.id = row.id;
+            this.form = row;
+            this.editVisible = true;
         },
         // 保存编辑
         saveEdit() {
             this.editVisible = false;
             this.$message.success(`修改第 ${this.idx + 1} 行成功`);
-            if (this.tableData[this.idx].id === this.id) {
-                this.$set(this.tableData, this.idx, this.form);
-            } else {
-                for (let i = 0; i < this.tableData.length; i++) {
-                    if (this.tableData[i].id === this.id) {
-                        this.$set(this.tableData, i, this.form);
-                        return;
-                    }
-                }
-            }
+            this.$set(this.tableData, this.idx, this.form);
+        },
+        // 分页导航
+        handlePageChange(val) {
+            this.page.index = val;
+            this.getData();
         }
     }
 };
@@ -234,10 +219,6 @@ export default {
     width: 300px;
     display: inline-block;
 }
-.del-dialog-cnt {
-    font-size: 16px;
-    text-align: center;
-}
 .table {
     width: 100%;
     font-size: 14px;