vue element select下拉框树形多选

在Vue中使用Element UI的<el-select>组件实现树形多选下拉框，可以通过<el-tree>组件配合<el-select>来实现。以下是一个简单的示例：

<template>
  <el-select
    v-model="selectedValues"
    multiple
    placeholder="请选择"
    :treeData="treeData"
    :props="defaultProps"
    @change="handleChange"
  >
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [], // 用于v-model的数组，存储选中的值
      treeData: [ // 树形结构的数据
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
            },
            // 更多子项...
          ],
        },
        // 更多项...
      ],
      defaultProps: { // 配置树形结构的属性
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    handleChange(value) {
      console.log(value); // 当选中项发生变化时，打印出选中的值
    },
  },
};
</script>

在这个例子中，selectedValues是绑定到<el-select>的多选模型，它是一个数组。treeData是树形结构的数据，defaultProps定义了如何访问树形数据中的子项和标签。handleChange方法用于监听选中项的变化，并可以用于处理选中值。