VUE Element-ui 级联选择器自定义value label属性 与 出现空白选项的bug解决方法
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
一、自定义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;
}
解决后的效果图:

A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐



所有评论(0)