表格和图表展示 ；同步 colFilter

wujingjing

2024-10-21 9e9d666bbe57503bb0902bda0d23bf34ae75e832

 src/components/table/colFilter/ColFilter.vue

@@ -2,14 +2,14 @@
   <el-dropdown trigger="click" placement="bottom-end" :hideOnClick="false">
      <span
         title="点击选择显示列"
         class="rounded-full p-1.5 border-[1.5px] hover:text-blue-400 border-gray-200 border-solid cursor-pointer ywifont ywicon-grid !text-[13px] mb-3"
         class="rounded-full p-1.5 border-[1.5px] hover:text-blue-400 border-gray-200 border-solid cursor-pointer ywifont ywicon-grid !text-[13px] h-fit"
      ></span>

      <template #dropdown>
         <div class="flex-column px-2 py-2">
            <el-checkbox
               class="hover:bg-[#edf3f8] w-full"
               v-for="item in checkOptionList"
               v-for="item in visibleOptionList"
               :key="item.key"
               v-model="item.value"
               :label="item.label"
@@ -31,10 +31,18 @@
      type: Array as PropType<TableCol[]>,
      default: () => [],
   },
   checkAllIsShow: {
      type: Boolean,
      default: true,
   },
});

const emit = defineEmits<{
   (event: 'change', option: CheckOption): void;
}>();

const colCheckChange = (option: CheckOption) => {
   const { key, value } = option;
   const { key } = option;
   if (key === allCheckKey) {
      if (option.indeterminate) {
         option.indeterminate = false;
@@ -61,18 +69,12 @@
         checkAllOption.indeterminate = true;
      }
   }
   emit('change', option);
};
const checkOptionList = ref<CheckOption[]>(
   (
      [
         {
            key: allCheckKey,
            label: '全选/不选',
            value: true,
         },
      ] as CheckOption[]
   ).concat(
      props.columnList.map((item) => ({
const checkOptionList = computed<CheckOption[]>(() => {
   let checkedCount = 0;
   const options = props.columnList.map((item) => {
      const result = {
         key: item.prop,
         label: item.label,
         get value() {
@@ -81,7 +83,32 @@
         set value(val) {
            item.isShow = val;
         },
      }))
   )
      };

      result.value && checkedCount++;
      return result;
   });
   const total = options.length;
   const firstOption: CheckOption = {
      key: allCheckKey,
      label: '全选/不选',
      value: false,
   };
   if (checkedCount === 0 || total === checkedCount) {
      firstOption.indeterminate = false;
      if (checkedCount === 0) {
         firstOption.value = false;
      } else {
         firstOption.value = true;
      }
   } else {
      firstOption.indeterminate = true;
   }
   options.unshift(firstOption);
   return options;
});

const visibleOptionList = computed(() =>
   props.checkAllIsShow ? checkOptionList.value : checkOptionList.value.filter((item) => item.key !== allCheckKey)
);
</script>