对antd官方文档的自定义筛选方法步骤进行解释
<template>
<a-table :data-source="data" :columns="columns">
<template #headerCell="{ column }">
<template v-if="column.key === 'name'">
<span style="color: #1890ff">Name</span>
</template>
</template>
<!-- 自定义筛选的样式 -->
<template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" >
<div style="padding: 8px">
<!--
用于下方指定input聚焦的变量名
ref="searchInput"
制定当前的值绑定为selectedKeys[0]
:value="selectedKeys[0]"
当输入框内容变化时通过setSelectedKeys方法把值赋值给selectedKeys（可能是考虑要有多个自定义筛选的值冲突所以setSelectedKeys赋的值是数据，当前input绑定的是第一个index）
@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
把input的value与selectedKeys[0]绑定后columns内的onFilter方法value值就绑定为selectedKeys[0]的值selectedKeys[0]的值是当前input的value值
-->
<a-input
ref="searchInput"
:placeholder="`Search ${column.dataIndex}`"
:value="selectedKeys[0]"
style="width: 188px; margin-bottom: 8px; display: block"
@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
@pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
/>
<a-button
type="primary"
size="small"
style="width: 90px;
margin-right: 8px"
@click="handleSearch(selectedKeys, confirm, column.dataIndex)"
>
<template #icon><SearchOutlined /></template> Search
</a-button>
<a-button
size="small"
style="width: 90px"
@click="handleReset(clearFilters)"
>
Reset
</a-button>
</div>
</template>
<!-- 表头自定义筛选的图标 -->
<template #customFilterIcon="{ filtered }">
<search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
</template>
<!--
对table列表内搜索的关键字在table列表内高亮显示
-->
<template #bodyCell="{ text, column }">
<span v-if="searchText && searchedColumn === column.dataIndex">
<template v-for="(fragment, i) in text .toString() .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))" >
<mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i" class="highlight" >
{{ fragment }}
</mark>
<template v-else>{{ fragment }}</template>
</template>
</span>
</template>
</a-table>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, ref, toRefs } from 'vue';
const data = [
{ key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', },
{ key: '2', name: 'Joe Black', age: 42, address: 'London No. 1 Lake Park', },
{ key: '3', name: 'Jim Green', age: 32, address: 'Sidney No. 1 Lake Park', },
{ key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park', }
];
export default defineComponent({
components: { SearchOutlined, },
setup() {
const state = reactive({ searchText: '', searchedColumn: '', });
const searchInput = ref();
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
//开启自定义筛选
customFilterDropdown: true,
//把input绑定的value与当前的name绑定的值进行比对筛选
onFilter: (value, record) => record.name.toString().toLowerCase().includes(value.toLowerCase()),
//当自定义筛选项展示时searchInput所绑定的input输入框自动聚焦
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => { searchInput.value.focus(); }, 100);
}
},
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
customFilterDropdown: true,
onFilter: (value, record) => record.address.toString().toLowerCase().includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => { searchInput.value.focus(); }, 100);
}
},
}
];
const handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
//把input的值赋值给searchText
state.searchText = selectedKeys[0];
//把触发input确认的table的dataIndex赋值给searchedColumn
state.searchedColumn = dataIndex;
};
const handleReset = clearFilters => {
clearFilters({ confirm: true, });
state.searchText = '';
};
return {
data,
columns,
handleSearch,
handleReset,
searchInput,
...toRefs(state),
};
},
});
</script>
<style scoped>
.highlight {
background-color: rgb(255, 192, 105);
padding: 0px;
}
</style>
