我需要一个 vue3+ant design vue 可配置的表格筛选器的代码
时间: 2023-11-27 10:54:41 浏览: 88
vue基于element制作表格数据筛选变色代码.zip
以下是一个基于 Vue3 和 Ant Design Vue 的可配置表格筛选器示例代码:
```
<template>
<div>
<a-table :columns="columns" :dataSource="dataSource" :loading="loading">
<template #filter="text">
<a-input v-model:value="filterValue[text.columnKey]" @change="handleFilterChange(text.columnKey)" />
</template>
</a-table>
</div>
</template>
<script>
import { ref } from 'vue';
import { Table, Input } from 'ant-design-vue';
export default {
components: {
ATable: Table,
AInput: Input,
},
setup() {
const dataSource = ref([
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
]);
const columns = ref([
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filterDropdown: true,
columnKey: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
filterDropdown: true,
columnKey: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
filterDropdown: true,
columnKey: 'address',
},
]);
const filterValue = ref({});
const loading = ref(false);
const handleFilterChange = (columnKey) => {
// 根据筛选器值过滤数据源
const filteredData = dataSource.value.filter((item) => {
const filterVal = filterValue.value[columnKey];
if (filterVal) {
return String(item[columnKey]).toLowerCase().includes(filterVal.toLowerCase());
}
return true;
});
// 更新数据源
dataSource.value = filteredData;
};
return {
dataSource,
columns,
filterValue,
loading,
handleFilterChange,
};
},
};
</script>
```
在这个示例代码中,我们使用了一个 `filterDropdown` 属性来告诉 Ant Design Vue 表格列需要显示筛选器。然后,我们在表格的 `filter` 插槽中渲染了一个 `Input` 组件,用于输入筛选器的值。在 `handleFilterChange` 方法中,我们根据筛选器的值过滤数据源,并更新数据源。最后,我们将数据源、列、筛选器值和加载状态返回给模板进行渲染。
阅读全文