TreeSelect(ant design vue)多选设置部分属性不可删除

说明

ant-design-vue中TreeSelect组件多选时，部分属性不可删除示例。

1、通过自定义插槽控制属性

• 通过插槽自定义控制是否删除操作，
• 适用：适合表单，单据要素的场景
• 效果如下：
  

<template #tagRender="{ label, closable, onClose, option }">
        <a-tag
          v-if="nonDeletableKeys.includes(option.value)"
          color="green"
          style="margin-right: 3px"
        >
          {{ label }}&nbsp;&nbsp;
        </a-tag>
        <a-tag v-else :closable="closable" style="margin-right: 3px" @close="onClose">
          {{ label }}&nbsp;&nbsp;
        </a-tag>
      </template>

2、通过change事件控制删除逻辑

• 实现：change时，判断是不可删除项时，将数据回填，并提示警告信息
• 适用：适合表格类，数据源共享，各行选择的数据不一样

const handleChange = (value: any) => {
  console.log('选中值变化:', value);

  // 确保不可删除的节点始终在选中值中
  let newValue = [...value];
  nonDeletableKeys.forEach(key => {
    if (!newValue.includes(key)) {
      newValue.push(key);
      message.warn('已使用节点不可修改');
    }
  });
  // 如果值有变化，则更新
  if (newValue.toString() !== value.toString()) {
    selectedValue.value = newValue;
  }
};

3、完整代码示例

<template>
  <div style="padding: 24px; max-width: 600px; margin: 0 auto">
    <h3>TreeSelect 多选且部分属性不可删除示例</h3>
    <a-tree-select
      v-model:value="selectedValue"
      show-search
      style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="Please select"
      allow-clear
      multiple
      tree-default-expand-all
      :tree-data="treeData"
      tree-node-filter-prop="label"
      @change="handleChange"
    >
      <template #tagRender="{ label, closable, onClose, option }">
        <a-tag
          v-if="nonDeletableKeys.includes(option.value)"
          color="green"
          style="margin-right: 3px"
        >
          {{ label }}&nbsp;&nbsp;
        </a-tag>
        <a-tag v-else :closable="closable" style="margin-right: 3px" @close="onClose">
          {{ label }}&nbsp;&nbsp;
        </a-tag>
      </template>
    </a-tree-select>
    <div style="margin-top: 16px; font-size: 14px">
      <p>当前选中值: {{ selectedValue ? selectedValue.join(', ') : '无' }}</p>
      <p style="color: #f5222d; margin-top: 8px">提示: 节点2 (parent 1-0) 被设置为不可删除</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { TreeSelectProps } from 'ant-design-vue';
import { message } from 'ant-design-vue';
// 选中值
const selectedValue = ref(['node1', 'node2']); // 默认选中两个节点，其中 node2 不可删除
// 不可删除的节点
const nonDeletableKeys = ['node1', 'node2'];
// 树数据
const treeData = ref<TreeSelectProps['treeData']>([
  {
    label: 'parent 1',
    value: 'parent1',
    children: [
      {
        label: 'parent 1-0',
        value: 'node1',
      },
      {
        label: 'parent 1-1',
        value: 'node2',
      },
      {
        label: 'parent 1-0-0',
        value: 'node3',
      },
      {
        label: 'parent 1-0-1',
        value: 'node4',
      },
    ],
  },
]);

// 处理选择变化
const handleChange = (value: any) => {
  console.log('选中值变化:', value);

  // 确保不可删除的节点始终在选中值中
  let newValue = [...value];
  nonDeletableKeys.forEach(key => {
    if (!newValue.includes(key)) {
      newValue.push(key);
      message.warn('已使用节点不可修改');
    }
  });
  // 如果值有变化，则更新
  if (newValue.toString() !== value.toString()) {
    selectedValue.value = newValue;
  }
};
</script>