vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
1.出现问题bug: el-cascader控件 最后一级出现空白 暂无数据
2. 问题原因分析
经过调试分析出现空级联原因是:由于数据是从后台传递过来的,当后端的哥们使用递归算出菜单,然后转换成json传递到前端的时候。就会出现 最底层 的子项中 的 children 为空数组,这样就会造成,空级联 的bug存在。
3.解决办法: 使用递归的方式,将最底层中的 children设为undefined
html代码
<el-cascader
:options="organizationData"
:props="leadProps"
clearable
v-model="powerForm.selectKeys"
@change="handleChange"
></el-cascader>
js代码
利用js递归将最后一级空数组变成undefined
getTreeData(data) {
for (let i = 0; i < data.length; i++) {
if (data[i].children.length < 1) {
// 最后一级没有数据将children变成undefined
data[i].children = undefined;
} else {
// children不为空时继续调用该方法
this.getTreeData(data[i].children);
}
}
return data;
},
对后台数据进行调用递归函数进行转换
// 获取指标牵头单位数据
async getOrganizationalData() {
try {
const { data: res } = await getOrganizationData();
this.organizationData = this.getTreeData(res.organizationList);
} catch (error) {
this.$message.error(error.message);
}
},




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:8 个月前 )
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 年前
更多推荐
所有评论(0)