使用Element UI创建一个复杂表格

在使用Element UI创建复杂的表格时，你可以利用其提供的`el-table`组件，这是一个功能强大的表格组件，可以轻松处理大量的数据展示和定制。以下是一个基本步骤：

1. 引入依赖：首先，在你的Vue项目中安装Element UI，并在模板文件中引入所需的CSS和JS库。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 安装并注册Element UI组件：在main.js中注册Element UI组件。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 创建表格结构：在你的组件模板中，创建一个`el-table`元素，设置列定义、行数据源和分页等功能。

<template>
  <div>
    <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="地址" width="400" />
      <!-- 添加其他你需要的列... -->
    </el-table>

    <el-pagination @current-change="handleCurrentChange" :total="total" layout="prev, pager, next" :page-size=5></el-pagination>
  </div>
</template>

4. 数据管理和事件监听：在组件的script部分，定义`tableData`数组作为表格的数据源，并处理分页事件。例如，`handleCurrentChange`方法会在当前页改变时被调用。

export default {
  data() {
    return {
      tableData: [], // 初始化为空的数据
      total: 0, // 总记录数
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的记录数
    };
  },
  methods: {
    async fetchData() {
      // 这里假设你有一个异步获取数据的方法，填充tableData和total
      this.tableData = ...;
      this.total = ...;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      // 更新表格数据
      this.fetchData();
    },
  },
  created() {
    this.fetchData(); // 初始加载数据
  },
};