表格和图表展示 ；同步 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,7 +31,15 @@
      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 } = option;
@@ -61,6 +69,7 @@
         checkAllOption.indeterminate = true;
      }
   }
   emit('change', option);
};
const checkOptionList = computed<CheckOption[]>(() => {
   let checkedCount = 0;
@@ -98,4 +107,8 @@
   options.unshift(firstOption);
   return options;
});

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