element [Bug Report] Cascader 级联选择器优化:children为[]时组件自动不显示下一级

huwehgph  于 2022-12-31  发布在  其他
关注(0)|答案(4)|浏览(494)

Element UI version

2.15.12

OS/Browsers version

所有

Vue version

2.7.14

https://codepen.io/pantt/pen/gOjPKJK?editors=1111

Steps to reproduce

Cascader 级联选择器:当children为空数组[]时,组件会渲染一级显示暂无数据空区域

What is Expected?

Cascader 级联选择器:当children为空数组[]时,组件自动 不渲染 暂无数据空区域

What is actually happening?

Cascader 级联选择器:当children为空数组[]时,组件会渲染一级显示暂无数据空区域

bihw5rsg

bihw5rsg1#

@pantt 下一级是当前级的选择结果, 我认为应该点击后出现结果有无,而不是不进行渲染,我认为当前的现象是正确的

64jmpszr

64jmpszr2#

@pantt 下一级是当前级的选择结果, 我认为应该点击后出现结果有无,而不是不进行渲染,我认为当前的现象是正确的

实际使用中下一集children为[]的话展示没有意义。比如树形结构的表格数据结构中下一集children为[]就不会显示。
每次用这个组件,都不得不处理遍历一边数据把children为[]时把这个字段删掉才能使用

或者作者大大加个属性,来决定选不渲染空的下一级
求求了真的好不方便,好不想每次用的时候都遍历处理数据删children字段

4uqofj5v

4uqofj5v3#

@pantt 下一级是当前级的选择结果, 我认为应该点击后出现结果有无,而不是不进行渲染,我认为当前的现象是正确的

这种情况在实际项目中每次都会提bug。求求求作者大大加个属性children是[]的时候是否渲染下一级吧,求求啦

niwlg2el

niwlg2el4#

@pantt 我们可以在社区讨论是否添加这个的api,我个人感觉这样的需求 对大多人没有数据的时候造成操作疑问。
你可以暂用这个过滤方法来预先剔除空的children:
treeEliminate() { let { options } = this; let newMap = new Map(); let index = 0; const eliminate = function () { if (!index) { newMap.set( index, options.map((item) => item) ); index++; eliminate(); } else { let oldTar = newMap.get(index - 1); if (oldTar.length) { let newTar = []; oldTar.map((item) => { if (item.children && item.children.length) { item.children.map((o) => { newTar.push(o); }); } else { item.children = null; } }); newMap.set(index, newTar); index++; eliminate(); } else { return false; } } }; eliminate(); }

相关问题