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

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

筛选前：

选择条件：

筛选后：

返回数据格式:

代码:

<el-table
  ref="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-column
    prop="dateTime"
    label="日期"
    sortable
    width="130"
    column-key="dateTime"
    :filters="projectData.dateTimeList"
    :filter-method="filterHandler"
  ></el-table-column>
  <el-table-column
    prop="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