fix(Table): indeterminate checkbox with pagination (#2439)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
kyyy
2024-10-24 17:41:45 +07:00
committed by GitHub
parent 8e413f0681
commit 070d2f89b6

View File

@@ -10,7 +10,7 @@
<tr :class="ui.tr.base"> <tr :class="ui.tr.base">
<th v-if="modelValue" scope="col" :class="ui.checkbox.padding"> <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
<UCheckbox <UCheckbox
:model-value="indeterminate || selected.length === rows.length" :model-value="isAllRowChecked"
:indeterminate="indeterminate" :indeterminate="indeterminate"
v-bind="ui.default.checkbox" v-bind="ui.default.checkbox"
aria-label="Select all" aria-label="Select all"
@@ -276,7 +276,23 @@ export default defineComponent({
} }
}) })
const indeterminate = computed(() => selected.value && selected.value.length > 0 && selected.value.length < props.rows.length) const getStringifiedSet = (arr: TableRow[]) => new Set(arr.map(item => JSON.stringify(item)))
const totalRows = computed(() => props.rows.length)
const countCheckedRow = computed(() => {
const selectedData = getStringifiedSet(selected.value)
const rowsData = getStringifiedSet(props.rows)
return Array.from(selectedData).filter(item => rowsData.has(item)).length
})
const indeterminate = computed(() => {
if (!selected.value || !props.rows) return false
return countCheckedRow.value > 0 && countCheckedRow.value < totalRows.value
})
const isAllRowChecked = computed(() => countCheckedRow.value === totalRows.value)
const emptyState = computed(() => { const emptyState = computed(() => {
if (props.emptyState === null) return null if (props.emptyState === null) return null
@@ -411,6 +427,7 @@ export default defineComponent({
emptyState, emptyState,
// eslint-disable-next-line vue/no-dupe-keys // eslint-disable-next-line vue/no-dupe-keys
loadingState, loadingState,
isAllRowChecked,
onChangeCheckbox, onChangeCheckbox,
openedRows, openedRows,
isSelected, isSelected,