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

---

筛选前：

选择条件：

筛选后：

---

返回数据格式:

代码:

<el-tableref="filterTable":data="projectData.list"height="540":header-cell-style="{'border-bottom': '1px solid rgb(1, 122, 249, 0.1)',}":cell-style="{'text-align': 'center','background-color': 'transparent', //鼠标移入'border-bottom': '1px solid rgb(1, 122, 249, 0.1)',}"@row-click="rowHandle"
><el-table-columnprop="dateTime"label="日期"sortablewidth="130"column-key="dateTime":filters="projectData.dateTimeList":filter-method="filterHandler"></el-table-column><el-table-columnprop="province"label="省":filters="projectData.provinceList":filter-method="filterHandler"></el-table-column>...
</el-table>//方法
// 项目过滤
filterHandler(value, row, column) {const property = column["property"];return row[property] === value;
},

---

解决参考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