element-ui之el-select下拉选择器树形选择器的使用方法，由于官方案例比较麻烦，而且说明也比较少，新手拿来还要研究一下，我用完后直接给简化了，复制去直接可以用，吧字段含义简单阐述一下，直接上代码吧
HTML代码
<el-select clearable ref="selectTree" v-model="value" placeholder="请选择" popper-class="popperTreeSelect">
<el-option :value="value" :label="value">
<el-tree
ref="tree"
:data="data"
default-expand-all
:props="defaultProps"
@node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{
{ node.label }}</span>
</span>
</el-tree>
</el-option>
</el-select>
</template>
defaultProps：默认参数配置，children参数，你子集的参数名，比如你后台返回的子集是child，那这个参数值就写child，label参数，当前层级绑定的唯一值，案例上绑的是label，我们开发一般是绑id，这个根据自己的参数来定
node.label，下拉选项显示的内容，一般开发中就是name,也就是案例中的label值
最后说一下handleNodeClick方法，this.value就是显示选中的值，这里和单选下拉不一样，绑定的不是id,其实可以理解为下拉是模拟的，选中后选中值需要我们自己去存一下，页面中只是显示了选中的名称，id并没有记录，所以这里的value是字符串，初始化默认值直接给文字就行，例如’三级 1-1-1’,这样， this.$refs.selectTree.blur();这里其实就是一个选择事件，不用管，
下面是我自己修改后的方法，仅供产考：我这里的需求是如果有下级单位，就必须选择到最后一级，所以加了一个判断if (data.child.length > 0) return;如果你们的需求是任何一级都可以选择，把这个去掉即可
handleNodeClick(data, node, b) {
if (data.child.length > 0) return;
this.form.selectName = data.name;
this.form.selectId = data.id;
this.value = data.name;
this.$refs.selectTree.blur();
},
js代码
export default {
data() {
return {
data: [{
label: '一级 1',
orgType: '1',
children: [{
label: '二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1',
orgType: '2',
children: [{
orgType: '3',
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
orgType: '1',
children: [{
orgType: '2',
label: '二级 2-1',
children: [{
orgType: '3',
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
orgType: '2',
children: [{
orgType: '3',
label: '三级 2-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
value: ''
}
},
methods: {
handleNodeClick(data,node,b) {
this.value = data.label;
this.$refs.selectTree.blur();
console.log(data);
console.log(node);
console.log(b);
console.log('dddddddd', this.$refs.tree.getCheckedNodes());
}
}
}
如果有什么不懂得，欢迎在下面留言，本意是记录一下自己以后用的时候方便找，如果可以帮到大家就更好了！你学废了吗？
