基于Element-ui 实现具有筛选、排序和分页功能的表格

以下是一个使用Vue.js和Element UI实现的具有筛选、排序和分页功能的表格的简单示例。

<template>
  <el-table
    :data="filteredData"
    style="width: 100%"
    @sort-change="handleSortChange">
    <el-table-column
      prop="date"
      label="日期"
      sortable="custom"
      :sort-orders="['ascending', 'descending', null]"
      :sort-method="sortDates">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable="custom"
      :sort-method="sortStrings">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      sortable="custom"
      :sort-method="sortStrings">
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="filteredData.length">
  </el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [
        // ... 填充你的数据 ...
      ],
      // 初始化不进行过滤和排序
      filteredData: this.tableData
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      this.filteredData = this.tableData.slice(startIndex, endIndex);
    },
    handleSortChange({ prop, order }) {
      if (order === 'ascending') {
        this.filteredData.sort((a, b) => {
          return this.sortStrings(a[prop], b[prop]);
        });
      } else if (order === 'descending') {
        this.filteredData.sort((a, b) => {
          return this.sortStrings(b[prop], a[prop]);
        });
      }
    },
    sortDates(a, b) {
      return new Date(a) - new Date(b);
    },
    sortStrings(a, b) {
      return a.toString().localeCompare(b.toString());
    }
  }
}
</script>

这段代码展示了如何在Vue.js和Element UI中创建一个带有分页和排序功能的表格。它使用了el-table和el-pagination组件，并通过计算属性和方法处理分页和排序。排序功能通过sortable属性启用，并通过sort-change事件处理程序进行排序。分页通过el-pagination的size-change和current-change事件处理程序来更新当前页面和每页显示的数据条数。