vue elementUI select树性选择器

在Vue中使用Element UI的el-select组件结合el-tree组件创建树形选择器，可以通过自定义下拉内容实现。以下是一个简单的示例：

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option :value="selectedValue" style="height: 200px">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        ref="tree"
        :highlight-current="true"
        :check-on-click-node="true"
        @check-change="handleCheckChange"
      >
      </el-tree>
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: null,
      treeData: [
        { 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) {
      this.selectedValue = data.id;
      this.$refs.tree.setCheckedKeys([data.id]);
    }
  }
};
</script>

在这个例子中，el-select的下拉内容被设置为一个el-tree组件，使得用户可以通过点击树节点来进行选择。handleCheckChange方法用于更新选中的节点值，并通过setCheckedKeys方法设置当前选中的节点。需要注意的是，由于el-option的内容是通过插槽的方式定制的，因此设置el-option的高度为200px来适配下来菜单的高度。