vue+element下拉树选择器

项目需求：输入框点击弹出树形下拉结构，可多选或者单选。

解决方案：1.使用layui formSelect多选插件

2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构

<el-form-item label="下拉树选择器">
      <el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags>
          <el-option :value="mineStatus" style="height: auto">
              <el-tree :data="treedata" default-expand-all show-checkbox check-strictly node-key="id"
                 ref="tree" highlight-current :props="defaultProps"
                 @check-change="handleCheckChange"></el-tree>
               </el-option>
           </el-select>
</el-form-item>

    data: function () {
        return {
            mineStatus: "",
            treedata: [],
            defaultProps: {
                children: "children",
                label: "name"
            },
        }
    },

 handleCheckChange(data, checked, node) {
            let res = this.$refs.tree.getCheckedNodes(false, true); //true，1. 是否只是叶子节点 2.选择的时候不包含父节点）
            if (checked) {
                this.$refs.tree.setCheckedNodes([data]);
            }
            let arrLabel = [];
            // console.log(res, 'res')
            res.forEach(item => {
                if (arrLabel.length === 0) {
                    arrLabel.push(item.name);
                } else {
                    arrLabel.length === 0;
                }
            });
            this.mineStatus = arrLabel;
            // console.log(arrLabel, 'arrLabel')
        },