将<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 = [];
    }
  }
};

 

posted @ 2025-03-31 16:08  罗毅豪  阅读(68)  评论(0)    收藏  举报