element 表格如下
<el-table
:data="tableData"
border>
<el-table-column
prop="moc"
label="MOC"
width="200"
:filters="filtersList"
:filter-method="filterTag"
filter-placement="bottom-end"
align="center">
</el-table-column>
</el-table>
这里面只写了需要 筛选列
在该列上 增加三行代码
:filters="filtersList"
:filter-method="filterTag"
filter-placement="bottom-end"
:filters="filtersList" 主要写你需要筛选的值,这里面需要 把所有需要筛选的值枚举出来 下面是我写的例子
可能有的同学想选中 触发条件,及单选模式 也很简单 只需要在 当前行添加 :filter-multiple=false
如 下面这样, filter-multiple 在官网说明中有,默认是 true ,及多选模式
<el-table
:data="tableData"
border>
<el-table-column
prop="moc"
label="MOC"
:filter-multiple=false
width="200"
:filters="filtersList"
:filter-method="filterTag"
filter-placement="bottom-end"
align="center">
</el-table-column>
</el-table>
data(){
return {
filtersList:[
{
text:"MOC4",
value:"MOC4"
},
{
text:"MOC5",
value:"MOC5"
},
{
text:"MOC6",
value:"MOC6"
},
{
text:"MOC7",
value:"MOC7"
},
{
text:"MOC8",
value:"MOC8"
},
{
text:"MOC9",
value:"MOC9"
}
]
}
}
filter-method="filterTag" 筛选函数
methods: {
filterTag(value, row) {
return row.moc === value;
},
}
row.moc 是当前行列为moc 的值,value 是你筛选选中的值。 展示效果如下
箭头 如果太小 可以用 伪类选中器
<style lang="less" scoped>
/deep/.el-table__column-filter-trigger .el-icon-arrow-down{
&:before{
content: "筛选∨";
font-size: 16px;
margin-left: 5px;
}
}
</style>
参考的文章找不到了; 如果你是作者请留言你的地址;必追加!