iview穿梭框(Transfer) filterable搜索条件清除

问题：


iview提供的穿梭框组件未提供在filterable开启时，清除搜索框中输入内容功能。在项目中遇到问题，将穿梭框放在model中操作，有搜索条件时模态框再次打开搜索条件仍然存在。

解决：

1、首先在iview官网上未找到可解决该问题的方式，但是去看了Element-UI提供了相应的功能


2、其次去GitHub上也没有找到类似的issue
3、重点来了：
在查看 【Transfer 穿梭框】相应的源码时发现如下代码：


在这里可以看出为组件传值的字段是【query】(这个在官方文档中也有体现，只是在这里得到了确认),如果可以在项目中获取到该字段，将其置空感觉可以解决问题。

下面争取找到【query】所在位置：

* 在调用穿梭框的位置打印整个this对象，将鼠标放在其子组件的$el上，在浏览器会只是其在页面中对应的位置，如此一级级缩小范围


* 终于在第三级找到了【query】，因为穿梭框存在两个所搜框，所以你会找到两个对应的【query】

4、最终选择在模态框消失的毁掉中置空上面两处的值，具体代码如下：
$('#xxx').on('hidden.bs.modal', () => { this.$children[2].$children[0].query =
'' this.$children[2].$children[2].query = '' })
后记：

通过这个过程了解了另外一种解决问题的思路：通过获取虚拟DOM中的数据解决问题。需要指出该方式不是正统方式，救急不救穷，不在万不得已的时候不要使用！！

• « 上一篇：小白的PCL路1（PCL1.8.1+VS2017配置）
• » 下一篇：程序员注意了！这样的公司千万不要去！