antdv-ts + vue3 + setup checked效果制作 全选、部分选择、取消选择

效果图

先上效果图

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