效果图
先上效果图
html代码
<a-form class="flex-col flex-start flex-w color-font-0">
<a-form-item v-for="item in CheckFilter" :label="item.name">
<a-checkbox
:checked="checkedAll(item)"
:indeterminate="indeterminate(item)"
@change="(e:any)=>{
Object.assign(item, { checded: e.target.checked ? item.defstate : [], indeterminate: false })
}"
>all</a-checkbox
>
<a-checkbox-group :value="item.checded" :options="item.defstate" @change="(checkedList:Array<any>) => {item.checded = checkedList}"
/>
</a-form-item>
</a-form>
ts代码
ts-setup
//#region form
interface IChecked { name: string; checded: Array<any>; defstate: Array<any>; }
enum EType { tree = "tree", building = "building", people = "people", animal = "animal", };
enum EBelong { user = "user", public = "public", vip = "vip", };
enum ETypefile { FBX = "FBX", Obj = "Obj", };
enum ESource { Mode = "Mode", UI = "UI", Video = "Video", Radio = "Radio", };
const CheckFilter: UnwrapRef<Array<IChecked>> = reactive([
{ name: "type", checded: [], defstate: Object.keys(EType), },
{ name: "belong", checded: ["user", "public", "vip"], defstate: Object.keys(EBelong), },
{ name: "typefile", checded: ["FBX"], defstate: Object.keys(ETypefile), },
{ name: "typesource", checded: [], defstate: Object.keys(ESource), },
]);
const checkedAll = computed(()=> {
return (_ele: IChecked) => {
let [min, max, now] = [0, _ele.defstate.length, _ele.checded.length];
return max === now;
}
})
const indeterminate = computed(()=> {
return (_ele: IChecked) => {
let [min, max, now] = [0, _ele.defstate.length, _ele.checded.length];
console.log('indeterminate', min, max, now, !((max == now) && (min == now)));
return !(max == now) && !(min == now);
}
})
//#endregion form