Vue3初学之Element-plus-table组件及分页

官方网址：https://element-plus.org/zh-CN/component/table.html

1. 安装 Element Plus
   npm install element-plus --save

2. 引入 Element Plus
   在 main.js 或 main.ts 文件中引入 Element Plus：

import ElementPlus from ‘element-plus’;
import ‘element-plus/dist/index.css’;
app.use(ElementPlus);

3.使用 el-table 组件
自定义列,例如添加操作按钮



4. 编辑功能
允许用户直接在表格中编辑数据：

<template>   <div class="container">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
            <template #default="scope">
              <el-input v-if="scope.row._edit" v-model="scope.row.date" />
              <span v-else>{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
            <template #default="scope">
              <el-input v-if="scope.row._edit" v-model="scope.row.name" />
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="地址">
            <template #default="scope">
              <el-input v-if="scope.row._edit" v-model="scope.row.address" />
              <span v-else>{{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <div v-if="scope.row._edit">
                <el-button type="primary" @click="handleSave(scope)">保存</el-button>
                <el-button @click="handleCancel(scope)">取消</el-button>
              </div>
              <el-button v-else type="primary" @click="handleEdit(scope)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>   </div> </template>
    
    <script setup> import { ref } from 'vue';
    
    const tableData = ref([   {
        date: '2016-05-02',
        name: '张三',
        address: '上海市普陀区金沙江路 1518 弄',
        _edit: false,   },   {
        date: '2016-05-04',
        name: '李四',
        address: '上海市普陀区金沙江路 1517 弄',
        _edit: false,   },   {
        date: '2016-05-01',
        name: '王五',
        address: '上海市普陀区金沙江路 1519 弄',
        _edit: false,   },   {
        date: '2016-05-03',
        name: '赵六',
        address: '上海市普陀区金沙江路 1516 弄',
        _edit: false,   }, ]);
    
    const handleEdit = (scope) => {   scope.row._edit = true; };
    
    const handleSave = (scope) => {   scope.row._edit = false;  
    console.log('保存', scope.row); };
    
    const handleCancel = (scope) => {   scope.row._edit = false; };
    </script>

5.使用 el-pagination 组件
与el-table组合

<template>
  <div class="container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  // 初始数据
]);

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  fetchTableData();
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchTableData();
};

const fetchTableData = () => {
  // 模拟数据请求
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  tableData.value = data.slice(start, end);
};

const data = [
  // 你的完整数据
  {
    date: '2016-05-02',
    name: '张三',
    address: '上海市普陀区金沙江路 1518 弄',
  },
      {
    date: '2016-05-02',
    name: '张三',
    address: '上海市普陀区金沙江路 1518 弄',
  },
      {
    date: '2016-05-02',
    name: '张三',
    address: '上海市普陀区金沙江路 1518 弄',
  },
      {
    date: '2016-05-02',
    name: '张三',
    address: '上海市普陀区金沙江路 1518 弄',
  },
      {
    date: '2016-05-02',
    name: '张三',
    address: '上海市普陀区金沙江路 1518 弄',
  },
      {
    date: '2016-05-02',
    name: '张三',
    address: '上海市普陀区金沙江路 1518 弄',
  },
      {
    date: '2016-05-02',
    name: '张三',
    address: '上海市普陀区金沙江路 1518 弄',
  },
      {
    date: '2016-05-02',
    name: '张三',
    address: '上海市普陀区金沙江路 1518 弄',
  },
      {
    date: '2016-05-02',
    name: '张三',
    address: '上海市普陀区金沙江路 1518 弄',
  },  {
    date: '2016-05-02',
    name: '张三',
    address: '上海市普陀区金沙江路 1518 弄',
  },
    
  {
    date: '2016-05-04',
    name: '李四',
    address: '上海市普陀区金沙江路 1517 弄',
  },

];
</script>