把element ui改成单选一个其他禁止选择Tree 树形控件

您可以通过修改 Element UI Tree 组件的节点模板来实现单选和禁止选择其他节点的功能。首先，您需要在 tree 组件上设置 `show-checkbox` 属性为 `true`，以显示节点前的复选框。接下来，在节点模板中添加一个单选框，将其绑定到节点的 `selected` 属性上，以实现单选功能。最后，在节点的渲染函数中，判断节点是否为指定节点，如果不是则禁止选择。

以下是一个示例代码：

<template>
  <el-tree
    :data="data"
    show-checkbox
    :node-key="nodeKey"
    :props="defaultProps"
    :render-content="renderContent"
    @check-change="handleCheckChange"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: 'Node 1',
          selected: false,
          children: [
            {
              id: 2,
              label: 'Node 1-1',
              selected: false,
              forbidden: true
            },
            {
              id: 3,
              label: 'Node 1-2',
              selected: false,
              forbidden: false
            }
          ]
        },
        {
          id: 4,
          label: 'Node 2',
          selected: false,
          children: [
            {
              id: 5,
              label: 'Node 2-1',
              selected: false,
              forbidden: false
            },
            {
              id: 6,
              label: 'Node 2-2',
              selected: false,
              forbidden: false
            }
          ]
        }
      ],
      nodeKey: 'id',
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    renderContent(h, { node, data }) {
      if (data.forbidden) {
        // 禁止选择
        return <span>{ data.label }</span>
      } else {
        // 单选框
        return (
          <span>
            <el-checkbox v-model={ data.selected }></el-checkbox>
            { data.label }
          </span>
        )
      }
    },
    handleCheckChange(data, checked) {
      if (checked) {
        // 取消其他节点的选择状态
        this.data.forEach(item => {
          if (item.id !== data.id) {
            item.selected = false
          }
          if (item.children) {
            item.children.forEach(child => {
              if (child.id !== data.id) {
                child.selected = false
              }
            })
          }
        })
      }
    }
  }
}
</script>

在上面的示例代码中，我们为节点添加了一个 `selected` 属性，用于存储节点是否被选中的状态。同时，我们还为其中一个节点设置了 `forbidden` 属性，用于指定该节点是否禁止选择。在节点的渲染函数中，如果节点被禁止选择，则只显示节点的文本内容；否则，显示一个单选框和节点的文本内容，将单选框的值绑定到节点的 `selected` 属性上。

在 `check-change` 事件的处理函数中，我们判断节点是否被选中，如果被选中，则取消其他节点的选择状态。注意，为了实现单选功能，我们需要确保在任何时候只有一个节点被选中。