将<a-tree>的多选操作变成单选多选兼容操作
原代码支持多选
<a-tree ref="tree" checkable blockNode v-model:expandedKeys="expandedKeys" :replace-fields="replaceFields" :tree-data="treeData" :load-data="getLeafNodes" @expand="handleExpand" @select="openLeaf" > </a-tree>
增加@check和:checkedKeys
改造为
<a-tree ref="tree" checkable blockNode v-model:expandedKeys="expandedKeys" :replace-fields="replaceFields" :tree-data="treeData" :load-data="getLeafNodes" @expand="handleExpand" @select="openLeaf" @check="handleCheck" :checkedKeys="checkedKeys" >
页面传入isMultipleSelect变量确定是单选还是多选
const isMultipleSelect = ref( JSON.parse(route.query.isMultipleSelect ?? "true") );
增加选择处理逻辑
const checkedKeys = ref([]); const handleCheck = (_, { checked, node }) => { const deptId = node.dataRef.deptId; if (isMultipleSelect.value) { if (checked) { if (!checkedKeys.value.includes(deptId)) { checkedKeys.value = [...checkedKeys.value, deptId]; } } else { checkedKeys.value = checkedKeys.value.filter((key) => key!== deptId); } } else { if (checked) { checkedKeys.value = [deptId]; } else { checkedKeys.value = []; } } };

浙公网安备 33010602011771号