转载:https://blog.csdn.net/liangxhblog/article/details/80513030
在element ui 框架中,对于table框架,有一个筛选功能,使用方法如下:
1.在要筛选的标签中加:filters属性,它由一个或多个包含text、value值的对象组成的数组。
tableStatus: [{ text: ‘异常‘, value: ‘异常‘ },{ text: ‘正常‘, value: ‘正常‘ },{ text: ‘请假‘, value: ‘请假‘ },{ text: ‘打卡‘, value: ‘打卡‘ }]
2.如果要使用filter-change方法,就必须在筛选标签的位置里加column-key属性
<el-table-column label="状态" prop="status" column-key="status" :filters="tableStatus" align="center"> <template slot-scope="scope"> <span :class="{red: scope.row.status === ‘异常‘, blue: ((scope.row.status === ‘补打卡‘) || (scope.row.status === ‘请假‘))}"> {{scope.row.status}} </span> </template> </el-table-column>
3.在table标签里加@filter-change事件,用于处理当筛选条件发生变化。
<el-table //htmlbu部分 :data="tableData" @filter-change="handleFilterChange" </el-table>
4.js部分
注意 : prop 属性若不指定字段名称,筛选将无效。
原文:https://www.cnblogs.com/hao-1234-1234/p/9636487.html