56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
<script setup lang="ts">
|
||
// indeterminate：半选状态，用于「全选」与部分选中的联动
|
||
import { computed, ref } from 'vue'
|
||
import { G3Checkbox, G3Space } from '@g3soft/ui'
|
||
|
||
const all = ref(['read', 'write'])
|
||
const checkedKeys = ref<string[]>(['read'])
|
||
|
||
const options = [
|
||
{ label: '可读', value: 'read' },
|
||
{ label: '可写', value: 'write' },
|
||
{ label: '可删除', value: 'delete' },
|
||
]
|
||
|
||
const isAllChecked = computed(() => checkedKeys.value.length === options.length)
|
||
const isIndeterminate = computed(
|
||
() => checkedKeys.value.length > 0 && checkedKeys.value.length < options.length,
|
||
)
|
||
|
||
function toggleAll(checked: boolean) {
|
||
checkedKeys.value = checked ? options.map((item) => item.value) : []
|
||
}
|
||
|
||
function toggleOne(value: string, checked: boolean) {
|
||
checkedKeys.value = checked
|
||
? [...checkedKeys.value, value]
|
||
: checkedKeys.value.filter((item) => item !== value)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space direction="vertical" :size="8" style="display: flex">
|
||
<!-- 全选：半选时显示减号 -->
|
||
<G3Checkbox
|
||
:model-value="isAllChecked"
|
||
:indeterminate="isIndeterminate"
|
||
@change="toggleAll"
|
||
>
|
||
全选（{{ checkedKeys.length }} / {{ options.length }}）
|
||
</G3Checkbox>
|
||
|
||
<div style="padding-left: 24px">
|
||
<G3Space direction="vertical" :size="8" style="display: flex">
|
||
<G3Checkbox
|
||
v-for="option in options"
|
||
:key="option.value"
|
||
:model-value="checkedKeys.includes(option.value)"
|
||
@change="(checked: boolean) => toggleOne(option.value, checked)"
|
||
>
|
||
{{ option.label }}
|
||
</G3Checkbox>
|
||
</G3Space>
|
||
</div>
|
||
</G3Space>
|
||
</template>
|