antd-vue 表格关闭弹窗重置表格搜索条件

a-table增加了搜索框,第一次输入搜索内容,下次打开的时候搜索框内内容未清空,仍然存在

clearFilters参数是antd自带的清空输入框内容的方法,定义一个变量把clearFilters赋值给这个变量clearTabSearch,在弹窗取消或者关闭的的时候调用清除表格搜索框得方法

<div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
              <a-input
                v-ant-ref="c => (searchInput = c)"
                :placeholder="`Search ${column.dataIndex}`"
                :value="selectedKeys[0]"
                style="width: 170px; margin-bottom: 8px; display: block;"
                @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                @pressEnter="() => handsleSearch(selectedKeys, confirm, column.dataIndex,clearFilters)" />
              <a-button type="primary" icon="search" size="small" style="width: 80px; margin-right: 8px" @click="() => handsleSearch(selectedKeys, confirm, column.dataIndex,clearFilters)">
                搜索
              </a-button>
              <a-button size="small" style="width: 80px" @click="() => handleReset(clearFilters)">
                重置
              </a-button>
            </div>
 handsleSearch (selectedKeys, confirm, dataIndex, clearFilters) {
      this.clearTabSearch = clearFilters
      confirm()
    }
关闭弹窗的时候调用
 this.handleReset(this.clearTabSearch)

猜你喜欢

转载自blog.csdn.net/weixin_45653441/article/details/128396307