笔者在公司项目使用Ant Design Vue 1.0 (以下简称Ant)的transfer时,用的是官网的表格穿梭框。 项目是Nuxt2创建的 项目需求大概长这样
在为transfer 添加上search 属性后,只要在搜索框中输入值,那必然报错:
合着我项目里也妹用到indexOf 啊。找了一圈,差点忽略了报错提示中的list.js
那行呗,进去定位到matchFilter 函数,发现,原来是这里
行,打断点一层层找这text为什么是空,最后找到这么一个方法
这个方法估计是将某个渲染函数生成的文本返回(具体不太清楚)
注意defaultRender 函数,点进去一看,好家伙,直接返回一个null,这就解释了为什么text 也是null 的原因
#### 那原因找到了该怎么解决呢?
官网的表格穿梭框没有体现出问题,然而笔者看普通带搜索穿梭框时,发现了一个属性render
官方解释是:每行数据渲染函数,该函数的入参为 dataSource
中的项,返回值为 element。或者返回一个普通对象,其中 label
字段为 element,value
字段为 title
那我想这是不就是那个renderItem
函数,因为它们的性质是一样的都是用于渲染本行的数据
不过在表格穿梭框中定义这个属性没有明显的视觉效果,因为数据会被表格本身覆盖
因此,我加上这个属性后,值为需要被搜索的字段
perfect 完美解决
总结:由于项目是通过表格穿梭框渲染,而且要求搜索框查询的是展开行中的目的地信息,但由于render属性本身是用于渲染每行的实际文本(这里使用jsx无效,还在寻找原因中)所以一开始笔者并没有使用这个属性,导致bug产生。emmm 估计有一部分原因是Ant 员工偷懒,直接用render属性做搜索,哈哈哈哈 要是Ant某位大佬看到了这篇文章,请不要打我,我只是个小coder~
建议(瞎想的,可以不看)
独立出一个属性用于定义每行的搜索字典。这样就不至于和render混淆了。 另外官方文档是时候更新一下了。。。。。
***就这样,非常感谢屏幕前这位大帅哥大漂亮,花费那么长时间看我在这BB,hhhhhh,祝各位工作顺利~!***