mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 04:39:12 +08:00
fix(table): wrong indeterminate state
修复table在包含默认不显示的列时,settings的[列展示]复选框的初始indeterminate状态不正确的问题
This commit is contained in:
@@ -117,7 +117,6 @@
|
|||||||
import type { BasicColumn } from '../../types/table';
|
import type { BasicColumn } from '../../types/table';
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
indeterminate: boolean;
|
|
||||||
checkAll: boolean;
|
checkAll: boolean;
|
||||||
checkedList: string[];
|
checkedList: string[];
|
||||||
defaultCheckList: string[];
|
defaultCheckList: string[];
|
||||||
@@ -158,7 +157,6 @@
|
|||||||
const columnListRef = ref<ComponentRef>(null);
|
const columnListRef = ref<ComponentRef>(null);
|
||||||
|
|
||||||
const state = reactive<State>({
|
const state = reactive<State>({
|
||||||
indeterminate: false,
|
|
||||||
checkAll: true,
|
checkAll: true,
|
||||||
checkedList: [],
|
checkedList: [],
|
||||||
defaultCheckList: [],
|
defaultCheckList: [],
|
||||||
@@ -233,7 +231,6 @@
|
|||||||
|
|
||||||
// checkAll change
|
// checkAll change
|
||||||
function onCheckAllChange(e: ChangeEvent) {
|
function onCheckAllChange(e: ChangeEvent) {
|
||||||
state.indeterminate = false;
|
|
||||||
const checkList = plainOptions.value.map((item) => item.value);
|
const checkList = plainOptions.value.map((item) => item.value);
|
||||||
if (e.target.checked) {
|
if (e.target.checked) {
|
||||||
state.checkedList = checkList;
|
state.checkedList = checkList;
|
||||||
@@ -244,10 +241,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const indeterminate = computed(() => {
|
||||||
|
const len = plainOptions.value.length;
|
||||||
|
let checkdedLen = state.checkedList.length;
|
||||||
|
if (unref(checkIndex)) {
|
||||||
|
checkdedLen--;
|
||||||
|
}
|
||||||
|
return checkdedLen > 0 && checkdedLen < len;
|
||||||
|
});
|
||||||
|
|
||||||
// Trigger when check/uncheck a column
|
// Trigger when check/uncheck a column
|
||||||
function onChange(checkedList: string[]) {
|
function onChange(checkedList: string[]) {
|
||||||
const len = plainOptions.value.length;
|
const len = plainOptions.value.length;
|
||||||
state.indeterminate = !!checkedList.length && checkedList.length < len;
|
|
||||||
state.checkAll = checkedList.length === len;
|
state.checkAll = checkedList.length === len;
|
||||||
|
|
||||||
const sortList = unref(plainSortOptions).map((item) => item.value);
|
const sortList = unref(plainSortOptions).map((item) => item.value);
|
||||||
@@ -261,7 +266,6 @@
|
|||||||
function reset() {
|
function reset() {
|
||||||
state.checkedList = [...state.defaultCheckList];
|
state.checkedList = [...state.defaultCheckList];
|
||||||
state.checkAll = true;
|
state.checkAll = true;
|
||||||
state.indeterminate = false;
|
|
||||||
plainOptions.value = unref(cachePlainOptions);
|
plainOptions.value = unref(cachePlainOptions);
|
||||||
plainSortOptions.value = unref(cachePlainOptions);
|
plainSortOptions.value = unref(cachePlainOptions);
|
||||||
table.setColumns(table.getCacheColumns());
|
table.setColumns(table.getCacheColumns());
|
||||||
@@ -339,6 +343,7 @@
|
|||||||
return {
|
return {
|
||||||
t,
|
t,
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
|
indeterminate,
|
||||||
onCheckAllChange,
|
onCheckAllChange,
|
||||||
onChange,
|
onChange,
|
||||||
plainOptions,
|
plainOptions,
|
||||||
|
Reference in New Issue
Block a user