el-select 下拉树勾选

el-select 是 Element UI 中的一个下拉选择组件，而 el-tree 是 Element UI 中的一个树形组件。el-select 下拉树勾选是指在 el-select 组件中使用 el-tree 组件作为下拉选项，并且可以进行多选或单选操作。

要实现 el-select 下拉树勾选，需要使用 el-tree 组件作为 el-select 的下拉选项，并设置 el-select 的 multiple 属性为 true（多选）或 false（单选）。

具体步骤如下：
1. 引入 Element UI 库和相关样式文件。
2. 在页面中使用 el-select 组件，并设置 multiple 属性为 true 或 false。
3. 在 el-select 组件中使用 el-tree 组件作为下拉选项，通过设置 el-tree 的 data 属性传入树形数据。
4. 根据需要，可以设置 el-tree 的 props 属性来自定义树形节点的显示和数据结构。
5. 可以通过监听 el-select 的 change 事件来获取用户选择的值。

示例代码如下：

<template>
  <div>
    <el-select v-model="selectedOptions" multiple>
      <el-tree :data="treeData" :props="treeProps" @check-change="handleCheckChange"></el-tree>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 用于存储用户选择的值
      treeData: [ // 树形数据
        {
          label: '节点1',
          children: [
            {
              label: '子节点1'
            },
            {
              label: '子节点2'
            }
          ]
        },
        {
          label: '节点2',
          children: [
            {
              label: '子节点3'
            },
            {
              label: '子节点4'
            }
          ]
        }
      ],
      treeProps: { // 树形节点的显示和数据结构配置
        label: 'label',
        children: 'children'
      }
    };
  },
  methods: {
    handleCheckChange(checkedNodes) {
      // 处理勾选变化事件
      console.log(checkedNodes);
    }
  }
};
</script>