From 9e9d666bbe57503bb0902bda0d23bf34ae75e832 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 21 十月 2024 17:17:25 +0800
Subject: [PATCH] 表格和图表展示 ；同步 colFilter
---
src/components/table/colFilter/ColFilter.vue | 59 +++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 43 insertions(+), 16 deletions(-)
diff --git a/src/components/table/colFilter/ColFilter.vue b/src/components/table/colFilter/ColFilter.vue
index e113291..315b1ac 100644
--- a/src/components/table/colFilter/ColFilter.vue
+++ b/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>
--
Gitblit v1.9.3