element UI 前端 某列 做筛选

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>

参考的文章找不到了； 如果你是作者请留言你的地址；必追加！