本文实例为大家分享了vue之ele多级联组件的使用具体代码，供大家参考，具体内容如下
多级联组件的使用
html
js
data () {
return {
options : [
{
value: "01",
label: "科技",
parentValue: "0",
children: [
{
value: "0101",
label: "半导体",
parentValue: "01",
children: [
{
value: "010101",
label: "环",
parentValue: "0101",
},
],
},
{
value: "0102",
label: "半导体2",
parentValue: "01",
children: [
{
value: "010201",
label: "显1",
parentValue: "0102",
},
],
},
{ value: "0103", label: "产业", parentValue: "01" },
],
},
{value: "02", label: "业", parentValue: "0" }, // 没有子集的时候
{value: "04", label: "类", parentValue: "0",children: [], }
],
cascadeValue: [], //级联选中的值
currentIndustry:[],
propsVal: {
checkStrictly: true,
},
};
},
methods: {
cascaderFocus(){
console.log("jiagouFocus");
},
cascaderChange(valArr){
console.log("jgTreeChange", valArr);
this.currentIndustry = valArr
},
}
// 重置的时候
reset() {
this.$refs.cascader.checkedValue = [];
this.$refs.cascader.dropDownVisible = false;
},
css
.cascader .el-scrollbar{
min-width: 120px!important;
max-width: 100%;
}
.cascader .el-cascader-node{
padding: 0 18px 0 0;
height: 30px;
}
.cascader.el-cascader-node .el-cascader-node__postfix{
right: 5px;
}
.cascader .el-cascader-node > .el-radio{
margin-left: 7px;
}
vue 之ele多级联组件 添加额外的按钮
需求：
- 第一层：集团； 第二层：板块； 第三层：产业
- 在ele多级联组件之中，第一层的时候添加一个全部按钮，点击第一层的全部的时候，则直接查询所有集团的数据；
- 在ele多级联组件之中，第二层的时候添加一个全部按钮，点击第二层的全部的时候，则直接查询所有板块的数据；
- 点击级联的第三层的时候，才加载数据！