推修改员工管理点击分页后再点击其他部门查询不到数据得问题；修改自定义列表功能不生效的问题

attendance-performance-manager-ui/admin/src/components/DataTable.vue

@@ -16,8 +16,9 @@
     :height="height"
     style="width: 100%"
   >
+    <template v-for="column in columns">
       <el-table-column
-      v-for="column in columns"
+        v-if="column.show"
         :key="column.prop"
         :type="column.type"
         :index="handleIndexMethod"
@@ -45,6 +46,7 @@
           :formatter="sunColumn.formatter"
         />
       </el-table-column>
+    </template>
   </el-table>
 </template>
 

attendance-performance-manager-ui/admin/src/views/staff/list.vue

@@ -59,7 +59,13 @@
       </el-col>
       <el-col :span="18" :xs="12">
         <el-row>
-          <LayoutTable notDel notAdd :data="tableData" :config="tableConfig">
+          <LayoutTable
+            notDel
+            notAdd
+            :data="tableData"
+            :config="tableConfig"
+            ref="layoutTable"
+          >
             <el-button
               type="primary"
               @click="doExport"
@@ -184,8 +190,8 @@
         </el-checkbox>
       </el-checkbox-group>
       <div class="mt20" style="text-align:right">
-        <el-button>取消</el-button>
-        <el-button type="primary">确定</el-button>
+        <el-button @click="() => (isdialog = falsle)">取消</el-button>
+        <el-button type="primary" @click="handleOk">确定</el-button>
       </div>
     </el-dialog>
 
@@ -218,11 +224,30 @@ export default {
     });
   },
   methods: {
+    handleOk() {
+      this.config.columns.forEach((v) => {
+        v.prop ? (v.show = false) : (v.show = true);
+        this.checkList.forEach((val) => {
+          if (val == v.label) {
+            v.show = true;
+          }
+        });
+      });
+      console.log(this.config.columns);
+      this.$forceUpdate(this.config.columns);
+      this.isdialog = false;
+    },
     // 自定义字段
     SelectEXport() {
       this.setcolum = this.config.columns.filter(
         (item) => item.label && item.prop
       );
+      console.log(this.config.columns);
+      this.checkList = this.setcolum.map((v) => {
+        if (v.show) {
+          return v.label;
+        }
+      });
       this.isdialog = true;
     },
     /** 同步 */
@@ -268,8 +293,10 @@ export default {
     },
 
     handleNodeClick(node) {
+      delete this.$route.query.page;
       this.currentNode = node;
       this.query = Object.assign({}, this.query, { deptId: node.id });
+      this.query.page = 1;
       this.getData();
     },
     doExport() {
@@ -355,27 +382,45 @@ export default {
           },
         ],
         columns: [
-          { type: "selection", width: 60 },
-          { type: "index", label: "序号", width: 50 },
-          { label: "员工姓名", prop: "name" },
-          { label: "工号", prop: "workNum" },
-          { label: "部门", prop: "deptName" },
-          { label: "职位", prop: "positionName", formatter: this.formatters },
+          { type: "selection", width: 60, show: true },
+          { type: "index", label: "序号", width: 50, show: true },
+          { label: "员工姓名", prop: "name", show: true },
+          { label: "工号", prop: "workNum", show: true },
+          { label: "部门", prop: "deptName", show: true },
+          {
+            label: "职位",
+            prop: "positionName",
+            formatter: this.formatters,
+            show: true,
+          },
           {
             label: "员工类型",
             prop: "staffType",
             formatter: this.formatterType,
+            show: true,
+          },
+          {
+            label: "员工状态",
+            prop: "status",
+            formatter: this.formatter,
+            show: true,
           },
-          { label: "员工状态", prop: "status", formatter: this.formatter },
           {
             label: "是否在政务中心",
             prop: "source",
             formatter: this.formatterSource,
+            show: true,
           }, //未对
-          { label: "手机号", prop: "phoneNumber", formatter: this.formatters },
+          {
+            label: "手机号",
+            prop: "phoneNumber",
+            formatter: this.formatters,
+            show: true,
+          },
           {
             label: "操作",
             width: 240,
+            show: true,
             formatter: (row) => {
               return (
                 // <table-buttons