el-table如何实现筛选功能，以及filters,filter_method详解

这篇文章距离上次修改已过257天，其中的内容可能已经有所变动。

在Element UI中，el-table组件支持通过设置filters和filter-method来实现筛选功能。

filters属性定义了筛选下拉菜单的选项，filter-method是实现自定义筛选逻辑的方法。

以下是一个简单的例子，展示了如何在el-table中使用筛选功能：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      :filters="[{ text: '2016-01', value: '2016-01' }, { text: '2016-05', value: '2016-05' }]"
      :filter-method="filterHandler"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      :filters="[{ text: '王小虎', value: '王小虎' }, { text: '李小虎', value: '李小虎' }]"
      :filter-method="filterHandler"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      sortable
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05',
        name: '张小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  }
}
</script>

在这个例子中，我们定义了一个包含三列的el-table，每列都通过filters属性定义了几个预设的筛选选项，并通过filter-method定义了一个筛选方法filterHandler。当用户在筛选下拉菜单中选择一个选项时，filter-method会被调用，并且每行数据都会被传入这个方法进行筛选。如果行数据符合筛选条件，则会显示在表格中，否则会被隐藏。

el-table如何实现筛选功能，以及filters,filter_method详解

评论已关闭

推荐阅读