Commit 495b1da385e9b6428d2b994669d2065722445923
1 parent
fe2bcfc6
fix(table): wrong indeterminate state
修复table在包含默认不显示的列时,settings的[列展示]复选框的初始indeterminate状态不正确的问题
Showing
1 changed file
with
10 additions
and
5 deletions
src/components/Table/src/components/settings/ColumnSetting.vue
@@ -117,7 +117,6 @@ | @@ -117,7 +117,6 @@ | ||
117 | import type { BasicColumn } from '../../types/table'; | 117 | import type { BasicColumn } from '../../types/table'; |
118 | 118 | ||
119 | interface State { | 119 | interface State { |
120 | - indeterminate: boolean; | ||
121 | checkAll: boolean; | 120 | checkAll: boolean; |
122 | checkedList: string[]; | 121 | checkedList: string[]; |
123 | defaultCheckList: string[]; | 122 | defaultCheckList: string[]; |
@@ -158,7 +157,6 @@ | @@ -158,7 +157,6 @@ | ||
158 | const columnListRef = ref<ComponentRef>(null); | 157 | const columnListRef = ref<ComponentRef>(null); |
159 | 158 | ||
160 | const state = reactive<State>({ | 159 | const state = reactive<State>({ |
161 | - indeterminate: false, | ||
162 | checkAll: true, | 160 | checkAll: true, |
163 | checkedList: [], | 161 | checkedList: [], |
164 | defaultCheckList: [], | 162 | defaultCheckList: [], |
@@ -233,7 +231,6 @@ | @@ -233,7 +231,6 @@ | ||
233 | 231 | ||
234 | // checkAll change | 232 | // checkAll change |
235 | function onCheckAllChange(e: ChangeEvent) { | 233 | function onCheckAllChange(e: ChangeEvent) { |
236 | - state.indeterminate = false; | ||
237 | const checkList = plainOptions.value.map((item) => item.value); | 234 | const checkList = plainOptions.value.map((item) => item.value); |
238 | if (e.target.checked) { | 235 | if (e.target.checked) { |
239 | state.checkedList = checkList; | 236 | state.checkedList = checkList; |
@@ -244,10 +241,18 @@ | @@ -244,10 +241,18 @@ | ||
244 | } | 241 | } |
245 | } | 242 | } |
246 | 243 | ||
244 | + const indeterminate = computed(() => { | ||
245 | + const len = plainOptions.value.length; | ||
246 | + let checkdedLen = state.checkedList.length; | ||
247 | + if (unref(checkIndex)) { | ||
248 | + checkdedLen--; | ||
249 | + } | ||
250 | + return checkdedLen > 0 && checkdedLen < len; | ||
251 | + }); | ||
252 | + | ||
247 | // Trigger when check/uncheck a column | 253 | // Trigger when check/uncheck a column |
248 | function onChange(checkedList: string[]) { | 254 | function onChange(checkedList: string[]) { |
249 | const len = plainOptions.value.length; | 255 | const len = plainOptions.value.length; |
250 | - state.indeterminate = !!checkedList.length && checkedList.length < len; | ||
251 | state.checkAll = checkedList.length === len; | 256 | state.checkAll = checkedList.length === len; |
252 | 257 | ||
253 | const sortList = unref(plainSortOptions).map((item) => item.value); | 258 | const sortList = unref(plainSortOptions).map((item) => item.value); |
@@ -261,7 +266,6 @@ | @@ -261,7 +266,6 @@ | ||
261 | function reset() { | 266 | function reset() { |
262 | state.checkedList = [...state.defaultCheckList]; | 267 | state.checkedList = [...state.defaultCheckList]; |
263 | state.checkAll = true; | 268 | state.checkAll = true; |
264 | - state.indeterminate = false; | ||
265 | plainOptions.value = unref(cachePlainOptions); | 269 | plainOptions.value = unref(cachePlainOptions); |
266 | plainSortOptions.value = unref(cachePlainOptions); | 270 | plainSortOptions.value = unref(cachePlainOptions); |
267 | table.setColumns(table.getCacheColumns()); | 271 | table.setColumns(table.getCacheColumns()); |
@@ -339,6 +343,7 @@ | @@ -339,6 +343,7 @@ | ||
339 | return { | 343 | return { |
340 | t, | 344 | t, |
341 | ...toRefs(state), | 345 | ...toRefs(state), |
346 | + indeterminate, | ||
342 | onCheckAllChange, | 347 | onCheckAllChange, |
343 | onChange, | 348 | onChange, |
344 | plainOptions, | 349 | plainOptions, |