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中的数据解决问题。需要指出该方式不是正统方式,救急不救穷,不在万不得已的时候不要使用!!

猜你喜欢

转载自blog.csdn.net/fengjingyu168/article/details/81745061