<template>
|
<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"
|
></span>
|
|
<template #dropdown>
|
<div class="flex-column px-2 py-2">
|
<el-checkbox
|
class="hover:bg-[#edf3f8] w-full"
|
v-for="item in checkOptionList"
|
:key="item.key"
|
v-model="item.value"
|
:label="item.label"
|
size="small"
|
@change="colCheckChange(item)"
|
:indeterminate="item.indeterminate"
|
/>
|
</div>
|
</template>
|
</el-dropdown>
|
</template>
|
|
<script lang="ts" setup>
|
import { PropType, computed, ref } from 'vue';
|
import { CheckOption, TableCol, allCheckKey } from './types';
|
|
const props = defineProps({
|
columnList: {
|
type: Array as PropType<TableCol[]>,
|
default: () => [],
|
},
|
});
|
|
const colCheckChange = (option: CheckOption) => {
|
const { key } = option;
|
if (key === allCheckKey) {
|
if (option.indeterminate) {
|
option.indeterminate = false;
|
option.value = true;
|
}
|
checkOptionList.value.map((item) => {
|
item.value = option.value;
|
});
|
} else {
|
const options = checkOptionList.value.filter((item) => item.key !== allCheckKey);
|
const len = options.length;
|
const checkedLen = options.filter((item) => item.value).length;
|
|
const checkAllOption = checkOptionList.value.find((item) => item.key === allCheckKey);
|
if (!checkAllOption) return;
|
if (checkedLen === 0 || len === checkedLen) {
|
checkAllOption.indeterminate = false;
|
if (checkedLen === 0) {
|
checkAllOption.value = false;
|
} else {
|
checkAllOption.value = true;
|
}
|
} else {
|
checkAllOption.indeterminate = true;
|
}
|
}
|
};
|
const checkOptionList = computed<CheckOption[]>(() => {
|
let checkedCount = 0;
|
const options = props.columnList.map((item) => {
|
const result = {
|
key: item.prop,
|
label: item.label,
|
get value() {
|
return item.isShow == undefined ? true : !!item.isShow;
|
},
|
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;
|
});
|
</script>
|
