ant design vue 自定义表头筛选，并一键清空

html: 使用filterDropdown自定义筛选，重写输入框发生变化的方法

js：通过filterValue控制各个表头筛选框内容

<a-table :columns="columns" :dataSource="values" :scroll="{x:true}" width="100%" rowKey="id" bordered>
        <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
              style="padding: 8px"
            >
              <a-input
                v-ant-ref="c => (searchInput = c)"
                :placeholder="`Search ${column.title}`"
                :value="selectedKeys[0]"
                style="width: 188px; margin-bottom: 8px; display: block;"
                
                @change="(e) => inputHandle(e.target.value,selectedKeys,column.key,setSelectedKeys)"
              />
              <a-button
                type="primary"
                icon="search"
                size="small"
                style="width: 90px; margin-right: 8px"
                @click="() => handleSearch(selectedKeys, confirm, column.key)"
              >
                Search
              </a-button>
              <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters,column.key)">
                Reset
              </a-button>
            </div>
            <a-icon
                  slot="filterIcon"
                  slot-scope="filtered"
                  type="search"
                  :style="{ color: filtered ? '#108ee9' : undefined }"
                />
</table>

data() {
      return {
        values: [],
        query: {
          page: PAGE,
          pageSize: PAGE_SIZE,
          trademarkOrderNo: '',
          name: ''
        },
        
        searchInput: null,
        searchedColumn:'',
        filteredInfo: null,
      }
    },
    computed: {
      columns(){
        let thead = JSON.parse(JSON.stringify(common.index.indexThead));
        let columns = common.createHeader(thead);
        let filteredInfo= this.filteredInfo||{};
        columns[0] = {
          key:'trademarkOrderNo',
          title: columns[0].title,
          dataIndex: columns[0].dataIndex,
          filteredValue: filteredInfo.trademarkOrderNo||[''],
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          }
        }
        columns[1] = {
          key:'name',
          title: columns[1].title,
          dataIndex: columns[1].dataIndex,
          filteredValue: filteredInfo.name||[''],
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          }
        }
        return columns
      }
    },
methods:{
      inputHandle(e,selectedKeys,key,setSelectedKeys){
        this.query[key]=e;
        let params={...this.filteredInfo}
        params[key]=[e];
        this.filteredInfo = params;
        if(e==''){
          return setSelectedKeys([])
        }else{
          return setSelectedKeys([])
        }
      },
      handleSearch(selectedKeys, confirm, key) {
        confirm();
        this.query[key]=selectedKeys[0];
        let params={...this.filteredInfo}
        params[key]=[selectedKeys[0]];
        this.filteredInfo = params;
        this.queryList();
      },
      handleReset(clearFilters,key) {
        clearFilters();
        this.query[key]='';
        let params={...this.filteredInfo}
        params[key]=[''];
        this.filteredInfo = params;
        this.queryList();
      },
      clearQuery() {
        this.filteredInfo = null;
        this.query = {
          page: PAGE,
          pageSize: PAGE_SIZE,
          name: '',
          trademarkName: ''
        }
        this.queryList();
      },
      queryList(){
      	...
      }
}