el-tree disabled不起作用

在Vue中，使用disabled属性来禁用el-tree节点时，有几种不同的实现方法，具体取决于你所使用的Vue版本。

在Vue2中，你可以使用以下方法来禁用el-tree节点：

<el-tree :data="data" node-key="id">
  <div class="custom-tree-node" slot-scope="{ node, data }">
    <span>{{ node.label }}</span>
    <div v-if="data.disabled" class="disabled" @click.stop></div>
  </div>
</el-tree>

而在Vue3中，你可以使用以下方法来实现单个节点的禁用效果：

<el-tree ref="treeId" :data="data" node-key="id" default-expand-all :highlight-current="true" :props="{ value: 'id', label: 'label', children: 'children', disabled: 'disabled', }" @node-click="nodeClick">
  <template #default="{ node, data }">
    <span class="custom-tree-node">
      <span>{{ node.label }}</span>
      <div v-if="data.disabled" class="disabled" @click.stop></div>
    </span>
  </template>
</el-tree>

如果你想要给el-tree的data递归赋值disabled属性，但发现无法生效，你可以尝试使用`this.$set(item, 'disabled', true)`来解决这个问题。具体的代码示例如下：

export default {
  data() {
    return {
      data3: [
        {
          id: 1,
          label: '一级 2',
          children: [
            {
              id: 3,
              label: '二级 2-1',
              children: [
                { id: 4, label: '三级 3-1-1' },
                { id: 5, label: '三级 3-1-2', disabled: true }
              ]
            },
            {
              id: 2,
              label: '二级 2-2',
              disabled: true,
              children: [
                { id: 6, label: '三级 3-2-1' },
                { id: 7, label: '三级 3-2-2', disabled: true }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted() {
    this.setDisabled(this.data3); //递归给数组禁止选中
  },
  methods: {
    setDisabled(obj) {
      obj.forEach(item => {
        this.$set(item, 'disabled', true);
        this.setDisabled(item.children);
      })
    }
  }
};