(vue)el-table在表头添加筛选功能

(vue)el-table在表头添加筛选功能

---

筛选前：

选择条件：

筛选后：

---

返回数据格式:

代码:

1. <el-table
2.   ref="filterTable"
3.   :data="projectData.list"
4.   height="540"
5.   :header-cell-style="{
6.     'border-bottom': '1px solid rgb(1, 122, 249, 0.1)',
7.   }"
8.   :cell-style="{
9.     'text-align': 'center',
10.     'background-color': 'transparent', //鼠标移入
11.     'border-bottom': '1px solid rgb(1, 122, 249, 0.1)',
12.   }"
13.   @row-click="rowHandle"
14. >
15.   <el-table-column
16.     prop="dateTime"
17.     label="日期"
18.     sortable
19.     width="130"
20.     column-key="dateTime"
21.     :filters="projectData.dateTimeList"
22.     :filter-method="filterHandler"
23.   ></el-table-column>
24.   <el-table-column
25.     prop="province"
26.     label="省"
27.     :filters="projectData.provinceList"
28.     :filter-method="filterHandler"
29.   ></el-table-column>
30.   ...
31. </el-table>
33. //方法
34. // 项目过滤
35. filterHandler(value, row, column) {
36.   const property = column["property"];
37.   return row[property] === value;
38. },

复制代码

---

办理参考1：https://element.eleme.cn/#/zh-CN/component/table

办理参考2：https://blog.csdn.net/qq_36396822/article/details/129047453

办理参考3：https://blog.csdn.net/dangsh_/article/details/109677149?login=from_csdn