vue element Cascader级联选择器解决最后一级显示空白问题
作者：王博wangbo
这篇文章主要介绍了vue element Cascader级联选择器解决最后一级显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1.遇到的问题
级联选择器，发现每个层级的最后一层总是显示为无数据。
预期效果为，当无数据时，应该不能点击展开。
2.解决思路
通过与element官网提供的数据对比后发现，当子级为空时，后台应该不返回children这一层级了，前端暂时处理下数据。
// 格式化数据源
this.options = this.formatData(data)
// 格式化数据，递归将空的children置为undefined
formatData(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].children.length < 1) {
data[i].children = undefined
} else {
this.formatData(data[i].children)
}
}
return data
}3.完整代码
<template>
<div class="white-body-view">
<el-cascader v-model="value" :options="options" />
</div>
</template>
<script>
export default {
data() {
return {
options: [],
value: ''
}
},
created() {
this.initData()
},
methods: {
initData() {
const data = [
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: []
}, {
value: 'daohang',
label: '导航',
children: []
}]
},
{
value: 'ziyuan',
label: '资源',
children: []
}]
this.options = this.formatData(data)
},
formatData(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].children.length < 1) {
data[i].children = undefined
} else {
this.formatData(data[i].children)
}
}
return data
}
}
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。