el-table 懒加载过滤

el-table 是 Element UI 中的表格组件，支持懒加载和过滤功能。

懒加载是指在表格数据量很大的情况下，只加载当前页面可见的数据，减少页面加载时间和资源占用。实现懒加载需要使用 el-table 的属性：`lazy` 和 `load`，其中 `lazy` 表示是否开启懒加载，`load` 是一个方法，用于加载数据。

过滤是指根据用户的输入条件筛选数据，只显示符合条件的数据。实现过滤需要使用 el-table 的属性：`filters` 和 `filter-method`，其中 `filters` 表示过滤条件，`filter-method` 是一个方法，用于根据过滤条件筛选数据。

下面是一个示例代码，演示了如何实现 el-table 的懒加载和过滤功能：

<template>
  <el-table
    :data="tableData"
    :lazy="true"
    :load="loadData"
    :filters="filters"
    :filter-method="filterMethod"
  >
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="年龄" prop="age"></el-table-column>
    <el-table-column label="性别" prop="gender"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      filters: [
        {
          text: '男',
          value: 'male',
        },
        {
          text: '女',
          value: 'female',
        },
      ],
    }
  },
  methods: {
    loadData(params) {
      // 加载数据的方法，params 包含当前页码和每页数据量
      // 根据 params 获取对应的数据并返回
      // 返回的数据需要包含总数据量和当前页数据
      // 如：{ total: 100, data: [{ name: '张三', age: 18, gender: 'male' }, ...] }
    },
    filterMethod(value, row, column) {
      // 过滤方法，value 为过滤条件，row 为当前行数据，column 为当前列属性
      // 根据 value 和 row 的属性值判断是否符合过滤条件，返回 true 或 false
      // 如：return row.gender === value
    },
  },
}
</script>