vue3+elementPlus实现列表的查询、翻页和查看功能

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button size="small" @click="handleView(scope.$index, scope.row)">查看</el-button>
      </template>
    </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="total">
  </el-pagination>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([]); // 表格数据
const currentPage = ref(1); // 当前页
const pageSize = ref(10); // 每页显示条数
const total = ref(0); // 总条数
 
// 查询列表
const fetchList = () => {
  // 模拟请求接口获取数据
  // 假设返回值为 { data: Array, total: Number }
  const { data, total: dataTotal } = await fetchData();
  tableData.value = data;
  total.value = dataTotal;
};
 
// 查看详情
const handleView = (index, row) => {
  console.log('查看详情:', index, row);
};
 
// 翻页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchList();
};
 
// 当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchList();
};
 
// 模拟数据请求
const fetchData = async () => {
  // 这里应该是发起请求获取数据
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: [], // 实际情况下这里应该是从服务器获取的数据
        total: 100 // 实际情况下这里应该是从服务器获取的总数
      });
    }, 1000);
  });
};
 
fetchList(); // 初始化查询列表
</script>

这个代码实例展示了如何使用Vue 3和Element Plus创建一个带有查询、翻页和查看详情功能的表格。它包括了模拟数据请求、分页处理和查看详情的基本逻辑。