一、自定义value label属性
html代码
<el-cascader
v-model="value"
clearable
:options="labelPool"
:props="setKesLabel"
></el-cascader>
js代码
export default {
data(){
return {
setKesLabel:{
value:'id',
label:'name',
children:'children'
},//自定义 级联选择器value label
labelPool: [],/* 标签池 */
value: [], /* 选中的标签 */
}
},
methods: {
//获取标签信息
getLabelPool(){
this.$get(url).then(res => {
this.labelPool = res.data;
})
},
}
}
二、解决出现空白选项的bug
使用ElementUI中级联选择器进行某些数据的选择时,发现最后一级是空白的页的情况,如下图所示:
出现原因,children 为空数组时。
解决办法:在前台js代码中,同样使用递归的方式,将最底层中的 children设为undefined
js代码
getLabelPool(){
// 这是从后台获取数据
this.$get(url).then(res => {
// 调用递归方法,去除级联数据后将数据赋值给级联选择器
this.labelPool = this.getTreeData(res.data);
})
},
// 递归方法
getTreeData(data){
// 循环遍历json数据
for(var i=0;i<data.length;i++){
if(data[i].children== "null"||data[i].children.length<1){
// children若为空数组,则将children设为undefined
data[i].children=undefined;
}else {
// children若不为空数组,则继续 递归调用 本方法
this.getTreeData(data[i].children);
}
}
return data;
}