vue3+antd 多选框全选和单选联动

实现效果

多选单选联动

主要代码

一，html部分

   {{ i.name }}

二，js部分

这里需求不止一个服务管理，所以是一个数组格式，可根据需求调整代码

   const state = reactive({scopeList: [{name: "服务管理",checkedList: ref([] as any),indeterminate: false,checkAll: false,children: [{name: "新增服务",id: 0,},{name: "分组管理",id: 1,},{name: "样式设置",id: 2,},{name: "批量操作",id: 3,},{name: "编辑",id: 4,},{name: "删除",id: 5,},],},],});

三，多选方法

    const checkAllChange = (event, index) => {let withOutPmIds = state.scopeList[index].children.map((item) => {return item.id;});state.scopeList[index].checkedList = event.target.checked? withOutPmIds: [];};

四，单选方法

  const onCheckChange = (event, index) => {const checkedLength = state.scopeList[index].checkedList.length;const listLength = state.scopeList[index].children.length;state.scopeList[index].indeterminate =!!checkedLength && checkedLength < listLength;state.scopeList[index].checkAll =checkedLength > 0 && checkedLength === listLength;};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！