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(){
...
}
}