优化表格列的显示与隐藏小组件

src/components/RightToolbar/index.vue

@@ -7,13 +7,23 @@
       <el-tooltip class="item" effect="dark" content="刷新" placement="top">
         <el-button circle icon="Refresh" @click="refresh()" />
       </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+      <el-tooltip class="item" effect="dark" content="显示/隐藏列" placement="top" v-if="columns">
-        <el-button circle icon="Menu" @click="showColumn()" />
+        <el-popover placement="bottom" trigger="click">
+          <div class="tree-header">显示/隐藏列</div>
+          <el-tree
+            ref="columnRef"
+            :data="columns"
+            show-checkbox
+            @check="columnChange"
+            node-key="key"
+            :props="{ label: 'label', children: 'children' }"
+          ></el-tree>
+          <template #reference>
+            <el-button circle icon="Menu" />
+          </template>
+        </el-popover>
       </el-tooltip>
     </el-row>
-    <el-dialog :title="title" v-model="open" append-to-body>
-      <el-transfer :titles="['显示', '隐藏']" v-model="value" :data="columns" @change="dataChange"></el-transfer>
-    </el-dialog>
   </div>
 </template>
 
@@ -29,15 +39,9 @@ const props = defineProps({
     gutter: propTypes.number.def(10),
 })
 
+const columnRef = ref<ElTreeInstance>();
 const emits = defineEmits(['update:showSearch', 'queryTable']);
 
-// 显隐数据
-const value = ref<Array<number>>([]);
-// 弹出层标题
-const title = ref("显示/隐藏");
-// 是否显示弹出层
-const open = ref(false);
-
 const style = computed(() => {
     const ret: any = {};
     if (props.gutter) {
@@ -56,23 +60,19 @@ function refresh() {
     emits("queryTable");
 }
 
-// 右侧列表元素变化
+// 更改数据列的显示和隐藏
-function dataChange(data: TransferKey[]) {
+function columnChange(...args: any[]) {
-    props.columns?.forEach((item) => {
+  props.columns?.forEach((item) => {
-        item.visible = !data.includes(item.key);
+    item.visible = args[1].checkedKeys.includes(item.key);
-    })
+  })
-}
-
-// 打开显隐列dialog
-const showColumn = () => {
-    open.value = true;
 }
 
 // 显隐列初始默认隐藏列
 onMounted(() => {
     props.columns?.forEach((item) => {
-        if (!item.visible) {
+        if (item.visible) {
-            value.value.push(item.key);
+          columnRef.value?.setChecked(item.key, true, false);
+            // value.value.push(item.key);
         }
     })
 })
@@ -91,4 +91,9 @@ onMounted(() => {
 .my-el-transfer {
   text-align: center;
 }
+.tree-header{
+  width: 100%;
+  line-height: 24px;
+  text-align: center;
+}
 </style>

src/types/global.d.ts

@@ -13,6 +13,7 @@ declare global {
     key: number;
     label: string;
     visible: boolean;
+    children: Array<FieldOption>;
   }
 
   /**

src/views/system/user/index.vue

@@ -340,13 +340,13 @@ const upload = reactive<ImportOption>({
 })
 // 列显隐信息
 const columns = ref<FieldOption[]>([
-  { key: 0, label: `用户编号`, visible: false },
+  { key: 0, label: `用户编号`, visible: false,children: [] },
-  { key: 1, label: `用户名称`, visible: true },
+  { key: 1, label: `用户名称`, visible: true,children: [] },
-  { key: 2, label: `用户昵称`, visible: true },
+  { key: 2, label: `用户昵称`, visible: true,children: [] },
-  { key: 3, label: `部门`, visible: true },
+  { key: 3, label: `部门`, visible: true,children: [] },
-  { key: 4, label: `手机号码`, visible: true },
+  { key: 4, label: `手机号码`, visible: true,children: [] },
-  { key: 5, label: `状态`, visible: true },
+  { key: 5, label: `状态`, visible: true,children: [] },
-  { key: 6, label: `创建时间`, visible: true }
+  { key: 6, label: `创建时间`, visible: true,children: [] }
 ])