【element plus 表格常见操作】

在Element Plus中，表格常见的操作包括分页、排序、筛选和选择。以下是一个简单的例子，展示了如何在Vue 3和Element Plus中实现这些操作。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    @sort-change="handleSortChange"
    @filter-change="handleFilterChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <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="地址"
      sortable="custom"
      width="300"
      filterable>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[100, 200, 300, 400]"
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400">
  </el-pagination>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  // 数据填充
]);
const currentPage = ref(1);
const selectedRows = ref([]);
 
function handleSelectionChange(selection) {
  selectedRows.value = selection;
}
 
function handleSortChange({ column, prop, order }) {
  console.log(`Sorted on: ${prop}, order: ${order}`);
  // 实现排序逻辑
}
 
function handleFilterChange(filters) {
  console.log('Filters:', filters);
  // 实现筛选逻辑
}
 
function handleSizeChange(val) {
  console.log(`page size changed to ${val}`);
  // 实现分页逻辑
}
 
function handleCurrentChange(val) {
  console.log(`current page changed to ${val}`);
  // 实现分页逻辑
}
</script>

在这个例子中，我们定义了一个表格和分页组件，并且为它们添加了相应的事件监听器。例如，@selection-change事件用于获取选中的行，@sort-change事件用于处理排序变化，@filter-change事件用于处理筛选变化，以及@size-change和@current-change事件用于处理分页变化。这些事件处理函数应该包含实现具体业务逻辑的代码。