el-tree 单选

要实现 el-tree 的单选功能，你可以使用 el-tree 的 `show-checkbox` 属性来显示复选框，然后通过设置 `check-on-click-node` 属性为 `true` 来在节点单击时选中节点。接下来，你可以使用 `@check-change` 事件来监听节点的选中状态变化，并在事件处理程序中更新选中的节点数据。以下是一个示例：

<template>
  <el-tree
    :data="data"
    :show-checkbox="true"
    :check-on-click-node="true"
    @check-change="handleCheckChange"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: 'Node 1',
          children: [
            { label: 'Node 1-1' },
            { label: 'Node 1-2' },
            { label: 'Node 1-3' },
          ],
        },
        {
          label: 'Node 2',
          children: [
            { label: 'Node 2-1' },
 

相关问题

el -tree单选

要实现 el-tree 单选，需要给每个节点添加一个唯一的 key 属性，然后在 el-tree 的节点点击事件中，获取当前节点的 key 值，再通过设置 v-model 绑定一个选中值，即可实现 el-tree 的单选功能。下面是代码示例：

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    @node-click="handleNodeClick"
    :props="defaultProps"
    v-model="selectedNodeKey"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: "Node 1",
          children: [
            {
              id: 2,
              label: "Node 1-1",
            },
            {
              id: 3,
              label: "Node 1-2",
            },
          ],
        },
        {
          id: 4,
          label: "Node 2",
          children: [
            {
              id: 5,
              label: "Node 2-1",
            },
            {
              id: 6,
              label: "Node 2-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      selectedNodeKey: null,
    };
  },
  methods: {
    handleNodeClick(data) {
      this.selectedNodeKey = data.id;
    },
  },
};
</script>

el-tree单选

在 `el-tree` 中实现单选可以通过以下步骤：

1. 在 `el-tree` 中设置 `node-key` 属性，该属性指定每个节点的唯一标识符。

<el-tree :data="treeData" :node-key="nodeKey"></el-tree>

data() {
  return {
    treeData: [
      { id: 1, label: 'Node 1' },
      { id: 2, label: 'Node 2', children: [
        { id: 3, label: 'Node 2-1' },
        { id: 4, label: 'Node 2-2' }
      ]}
    ],
    nodeKey: 'id'
  }
}

2. 在 `el-tree` 中设置 `default-checked-keys` 属性为空数组，以确保初始状态下没有选中的节点。

<el-tree :data="treeData" :node-key="nodeKey" :default-checked-keys="[]"></el-tree>

3. 为 `el-tree` 的 `check` 事件添加处理函数。在处理函数中，使用 `setCheckedKeys` 方法设置选中的节点。由于是单选，我们只需要选中最后一次点击的节点。

<el-tree :data="treeData" :node-key="nodeKey" :default-checked-keys="[]" @check="handleCheck"></el-tree>

methods: {
  handleCheck(checkedNodes, node) {
    const lastCheckedNode = checkedNodes[checkedNodes.length - 1];
    if (lastCheckedNode) {
      const checkedKeys = [lastCheckedNode[this.nodeKey]];
      this.$refs.tree.setCheckedKeys(checkedKeys);
    }
  }
}

完整的示例代码如下：

<template>
  <el-tree :data="treeData" :node-key="nodeKey" :default-checked-keys="[]" @check="handleCheck" ref="tree"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, label: 'Node 1' },
        { id: 2, label: 'Node 2', children: [
          { id: 3, label: 'Node 2-1' },
          { id: 4, label: 'Node 2-2' }
        ]}
      ],
      nodeKey: 'id'
    }
  },
  methods: {
    handleCheck(checkedNodes, node) {
      const lastCheckedNode = checkedNodes[checkedNodes.length - 1];
      if (lastCheckedNode) {
        const checkedKeys = [lastCheckedNode[this.nodeKey]];
        this.$refs.tree.setCheckedKeys(checkedKeys);
      }
    }
  }
}
</script>