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;
}
解决后的效果图:
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
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 7 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)