vue的elementUI的el-tree的选择

在Vue中使用Element UI的el-tree组件时，可以通过node-key属性指定节点的唯一标识，通常是节点数据对象中的一个属性名。

要实现节点的选择，可以使用highlight属性来设置是否高亮选中节点，以及show-checkbox属性来显示复选框，允许用户选择多个节点。

以下是一个简单的例子，展示了如何使用el-tree组件进行选择：

<template>
  <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    :props="defaultProps"
    @check-change="handleCheckChange"
  >
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        { id: 1, label: '节点1', children: [{ id: 2, label: '节点1-1' }] },
        { id: 3, label: '节点2', children: [{ id: 4, label: '节点2-1' }] }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    }
  }
};
</script>

在这个例子中，data属性包含树的节点数据，show-checkbox属性使得每个节点旁边显示一个复选框。node-key设置为id，表示每个节点的唯一标识是id属性。defaultProps定义了子节点的属性名和标签文本的映射。handleCheckChange方法用于处理节点选择的变化。