vue element Cascader 级联选择器 解决最后一级显示空白
1.遇到的问题,级联选择器,发现每个层级的最后一层总是显示为无数据。预期效果为,当无数据时,应该不能点击展开。2. 解决思路,通过与element官网提供的数据对比后发现,当子级为空时,后台应该不返回children这一层级了,前端暂时处理下数据。// 格式化数据源this.options = this.formatData(data)// 格式化数据,递归将空的children置为undefin
·
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>
更多推荐
已为社区贡献8条内容
所有评论(0)