vue 下拉框中填充树型数据

在 Vue 中填充树型数据到下拉框中可以使用 Element UI 的 el-cascader 组件。该组件可以通过设置 options 属性来生成树形下拉框。options 属性是一个数组，每个元素代表一个选项，其中 label 属性表示选项的文本，value 属性表示选项的值，children 属性表示当前选项的子选项。

下面是一个示例代码：

<el-cascader v-model="selected" :options="options" expand-trigger="hover"></el-cascader>

export default {
  data() {
    return {
      selected: [],
      options: [{
        label: '选项1',
        value: '1',
        children: [{
          label: '子选项1',
          value: '1-1'
        }, {
          label: '子选项2',
          value: '1-2'
        }]
      }, {
        label: '选项2',
        value: '2',
        children: [{
          label: '子选项3',
          value: '2-1'
        }, {
          label: '子选项4',
          value: '2-2',
          children: [{
            label: '子子选项1',
            value: '2-2-1'
          }, {
            label: '子子选项2',
            value: '2-2-2'
          }]
        }]
      }]
    };
  }
};

在上面的代码中，options 数组中包含两个选项，每个选项又包含子选项。当用户选择某个选项时，会触发 selected 变量的更新，其值为选中的选项的 value 数组。例如，用户选择了 [选项1, 子选项2]，则 selected 的值为 ['1', '1-2']。

需要注意的是，el-cascader 组件需要引入 Element UI 库，可以通过以下方式导入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);