element-ui table表头怎样筛选并修改筛选图标的样式

1. <template>
2.   <el-button @click="resetDateFilter">reset date filter</el-button>
3.   <el-button @click="clearFilter">reset all filters</el-button>
4.   <el-table ref="tableRef" row-key="date" class="m-table" :data="tableData" style="width: 100%">
5.     <el-table-column
6.       prop="date"
7.       label="Date"
8.       width="180"
9.       column-key="date"
10.       :filters="[
11.         { text: '2016-05-01', value: '2016-05-01' },
12.         { text: '2016-05-02', value: '2016-05-02' },
13.         { text: '2016-05-03', value: '2016-05-03' },
14.         { text: '2016-05-04', value: '2016-05-04' }
15.       ]"
16.       :filter-method="filterHandler"
17.     />
18.     <el-table-column prop="name" label="Name" width="180" />
19.     <el-table-column prop="address" label="Address" :formatter="formatter" />
21.     <el-table-column
22.       prop="tag"
23.       label="Tag"
24.       width="100"
25.       :filters="[
26.         { text: 'Home', value: 'Home' },
27.         { text: 'Office', value: 'Office' }
28.       ]"
29.       :filter-method="filterTag"
30.       filter-placement="bottom-end"
31.     >
32.       <template #default="scope">
33.         <el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" disable-transitions>{{
34.           scope.row.tag
35.         }}</el-tag>
36.       </template>
37.     </el-table-column>
38.   </el-table>
39. </template>
41. <script lang="ts" setup>
42. import { ref } from 'vue'
43. import type { TableColumnCtx, TableInstance } from 'element-plus'
45. interface User {
46.   date: string
47.   name: string
48.   address: string
49.   tag: string
50. }
52. const tableRef = ref<TableInstance>()
54. const resetDateFilter = () => {
55.   tableRef.value!.clearFilter(['date'])
56. }
57. const clearFilter = () => {
58.   tableRef.value!.clearFilter()
59. }
60. const formatter = (row: User, column: TableColumnCtx<User>) => {
61.   return row.address
62. }
63. const filterTag = (value: string, row: User) => {
64.   return row.tag === value
65. }
66. const filterHandler = (value: string, row: User, column: TableColumnCtx<User>) => {
67.   const property = column['property']
68.   return row[property] === value
69. }
71. const tableData: User[] = [
72.   {
73.     date: '2016-05-03',
74.     name: 'Tom',
75.     address: 'No. 189, Grove St, Los Angeles',
76.     tag: 'Home'
77.   },
78.   {
79.     date: '2016-05-02',
80.     name: 'Tom',
81.     address: 'No. 189, Grove St, Los Angeles',
82.     tag: 'Office'
83.   },
84.   {
85.     date: '2016-05-04',
86.     name: 'Tom',
87.     address: 'No. 189, Grove St, Los Angeles',
88.     tag: 'Home'
89.   },
90.   {
91.     date: '2016-05-01',
92.     name: 'Tom',
93.     address: 'No. 189, Grove St, Los Angeles',
94.     tag: 'Office'
95.   }
96. ]
97. </script>
99. <style>
100. .m-table .el-table__column-filter-trigger .el-icon {
101.   display: none;
102. }
103. .m-table .el-table__column-filter-trigger::before {
104.   content: '666';
105.   color: red;
106. }
107. </style>

复制代码

人工智能学习网站
https://chat.xutongbao.top



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。