样式调整

src/components/RightToolbar/index.vue

@@ -7,20 +7,15 @@
       <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="Object.keys(columns).length > 0">
+      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
         <el-button circle icon="Menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
         <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
           <el-button circle icon="Menu" />
           <template #dropdown>
             <el-dropdown-menu>
-              <!-- 全选/反选 按钮 -->
-              <el-dropdown-item>
-                <el-checkbox :indeterminate="isIndeterminate" v-model="isChecked" @change="toggleCheckAll"> 列展示 </el-checkbox>
-              </el-dropdown-item>
-              <div class="check-line"></div>
-              <template v-for="(item, key) in columns" :key="item.key">
+              <template v-for="item in columns" :key="item.key">
                 <el-dropdown-item>
-                  <el-checkbox v-model="item.visible" @change="checkboxChange($event, key)" :label="item.label" />
+                  <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
                 </el-dropdown-item>
               </template>
             </el-dropdown-menu>
@@ -32,7 +27,7 @@
       <el-transfer
         :titles="['显示', '隐藏']"
         v-model="value"
-        :data="transferData"
+        :data="columns"
         @change="dataChange"
       ></el-transfer>
     </el-dialog>
@@ -44,119 +39,83 @@ const props = defineProps({
   /* 是否显示检索条件 */
   showSearch: {
     type: Boolean,
-    default: true
+    default: true,
   },
-  /* 显隐列信息（数组格式、对象格式） */
+  /* 显隐列信息 */
   columns: {
-    type: [Array, Object],
-    default: () => ({})
+    type: Array,
   },
   /* 是否显示检索图标 */
   search: {
     type: Boolean,
-    default: true
+    default: true,
   },
   /* 显隐列类型（transfer穿梭框、checkbox复选框） */
   showColumnsType: {
     type: String,
-    default: "checkbox"
+    default: "checkbox",
   },
   /* 右外边距 */
   gutter: {
     type: Number,
-    default: 10
+    default: 10,
   },
 })
 
-const emits = defineEmits(['update:showSearch', 'queryTable'])
+const emits = defineEmits(['update:showSearch', 'queryTable']);
 
 // 显隐数据
-const value = ref([])
+const value = ref([]);
 // 弹出层标题
-const title = ref("显示/隐藏")
+const title = ref("显示/隐藏");
 // 是否显示弹出层
-const open = ref(false)
+const open = ref(false);
 
 const style = computed(() => {
-  const ret = {}
+  const ret = {};
   if (props.gutter) {
-    ret.marginRight = `${props.gutter / 2}px`
+    ret.marginRight = `${props.gutter / 2}px`;
   }
-  return ret
-})
-
-// 是否全选/半选 状态
-const isChecked = computed({
-  get: () => Array.isArray(props.columns) ? props.columns.every(col => col.visible) : Object.values(props.columns).every((col) => col.visible),
-  set: () => {}
-})
-const isIndeterminate = computed(() => Array.isArray(props.columns) ? props.columns.some((col) => col.visible) && !isChecked.value : Object.values(props.columns).some((col) => col.visible) && !isChecked.value)
-const transferData = computed(() => Array.isArray(props.columns) ? props.columns.map((item, index) => ({ key: index, label: item.label })) : Object.keys(props.columns).map((key, index) => ({ key: index, label: props.columns[key].label })))
+  return ret;
+});
 
 // 搜索
 function toggleSearch() {
-  emits("update:showSearch", !props.showSearch)
+  emits("update:showSearch", !props.showSearch);
 }
 
 // 刷新
 function refresh() {
-  emits("queryTable")
+  emits("queryTable");
 }
 
 // 右侧列表元素变化
 function dataChange(data) {
-  if (Array.isArray(props.columns)) {
-    for (let item in props.columns) {
-      const key = props.columns[item].key
-      props.columns[item].visible = !data.includes(key)
-    }
-  } else {
-    Object.keys(props.columns).forEach((key, index) => {
-      props.columns[key].visible = !data.includes(index)
-    })
+  for (let item in props.columns) {
+    const key = props.columns[item].key;
+    props.columns[item].visible = !data.includes(key);
   }
 }
 
 // 打开显隐列dialog
 function showColumn() {
-  open.value = true
+  open.value = true;
 }
 
-if (props.showColumnsType == "transfer") {
-  // transfer穿梭显隐列初始默认隐藏列
-  if (Array.isArray(props.columns)) {
-    for (let item in props.columns) {
-      if (props.columns[item].visible === false) {
-        value.value.push(parseInt(item))
-      }
+if (props.showColumnsType == 'transfer') {
+  // 显隐列初始默认隐藏列
+  for (let item in props.columns) {
+    if (props.columns[item].visible === false) {
+      value.value.push(parseInt(item));
     }
-  } else {
-    Object.keys(props.columns).forEach((key, index) => {
-      if (props.columns[key].visible === false) {
-        value.value.push(index)
-      }
-    })
   }
 }
 
-// 单勾选
-function checkboxChange(event, key) {
-  if (Array.isArray(props.columns)) {
-    props.columns.filter(item => item.key == key)[0].visible = event
-  } else {
-    props.columns[key].visible = event
-  }
+// 勾选
+function checkboxChange(event, label) {
+  props.columns.filter(item => item.label == label)[0].visible = event;
 }
 
-// 切换全选/反选
-function toggleCheckAll() {
-  const newValue = !isChecked.value
-  if (Array.isArray(props.columns)) {
-    props.columns.forEach((col) => (col.visible = newValue))
-  } else {
-    Object.values(props.columns).forEach((col) => (col.visible = newValue))
-  }
-}
 </script>
 
 <style lang='scss' scoped>
@@ -172,10 +131,4 @@ function toggleCheckAll() {
   line-height: 30px;
   padding: 0 17px;
 }
-.check-line {
-  width: 90%;
-  height: 1px;
-  background-color: #ccc;
-  margin: 3px auto;
-}
 </style>