ElementUI中el-table表格实现自定义过滤和排序

在ElementUI中，可以使用el-table-column的sortable属性来实现排序，并通过自定义筛选组件来实现自定义筛选。以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable="custom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable="custom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter"
      sortable="custom"
      width="300">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '孙小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    formatter(row, column) {
      return row.address;
    }
  }
}
</script>

在这个例子中，我们定义了一个包含日期、姓名和地址的表格。我们使用sortable="custom"在el-table-column上启用自定义排序。对于地址列，我们使用了formatter方法来格式化显示的文本。

要实现自定义筛选，你可能需要使用一个自定义的下拉菜单或者对话框来让用户输入筛选条件，并在ElementUI表格的相关事件中应用这些筛选条件。这通常涉及监听sort-change和filter-change事件，并在事件处理函数中更新数据。