CN-1040: adminiastration底下各table的customization功能更新

src/components/table/administration/OperationLogTable.vue

@@ -18,8 +18,8 @@
       width="55">
     </el-table-column>
     <el-table-column
-      v-for="item in customTableTitles"
-      :key="item.prop"
+      v-for="(item, index) in customTableTitles"
+      :key="item.prop+index"
       :fixed="item.fixed"
       :label="item.label"
       :min-width="`${item.minWidth}`"

src/components/table/administration/RoleTable.vue

@@ -16,8 +16,8 @@
       width="55">
     </el-table-column>
     <el-table-column
-      v-for="item in customTableTitles"
-      :key="item.prop"
+      v-for="(item, index) in customTableTitles"
+      :key="item.prop+index"
       :fixed="item.fixed"
       :label="item.label"
       :min-width="`${item.minWidth}`"
@@ -74,7 +74,22 @@ export default {
           prop: 'remark',
           show: true
         }
-      ]
+      ],
+      isRefresh: true
+    }
+  },
+  watch: {
+    customTableTitles (n) {
+      // 数据变化，界面未渲染，vue3.2弃用$set,使用reactive绑定数组，界面也未响应，该方法不优美，后续有更佳替代方案时替换
+      if (n && n.length > 0) {
+        if (n[0].flag === 'drag') {
+          // 重新渲染，会导致界面偶现闪的情况，点击checkbox时界面闪会比较丑，故不处理点击的情况
+          this.isRefresh = false
+          this.$nextTick(() => {
+            this.isRefresh = true
+          })
+        }
+      }
     }
   }
 }

src/components/table/administration/UserTable.vue

@@ -17,8 +17,8 @@
       width="55">
     </el-table-column>
     <el-table-column
-      v-for="item in customTableTitles"
-      :key="item.prop"
+      v-for="(item, index) in customTableTitles"
+      :key="item.prop+index"
       :fixed="item.fixed"
       :label="item.label"
       :min-width="`${item.minWidth}`"
@@ -51,12 +51,12 @@
         </template>
         <template v-else-if="item.prop === 'status'">
           <el-switch
-                  v-if="scope.row.id"
-                  v-model="scope.row.status"
-                  active-value="1"
-                  :disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
-                  inactive-value="0"
-                  @change="()=>{statusChange(scope.row)}">
+              v-if="scope.row.id"
+              v-model="scope.row.status"
+              active-value="1"
+              :disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
+              inactive-value="0"
+              @change="()=>{statusChange(scope.row)}">
           </el-switch>
         </template>
         <span v-else>{{scope.row[item.prop]}}</span>