关于ElementUI之动态树+数据表格+分页实例

<template>
  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children'}">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </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>
export default {
  data() {
    return {
      currentPage: 1,
      tableData: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟请求数据
      const data = Array.from({ length: 100 }, (_, index) => ({
        id: index,
        date: '2016-05-02',
        name: '王小虎',
        address: `上海市普陀区金沙江路${index}号`
      }));
      // 这里只是为了模拟树结构，实际应用中应该根据后端返回的数据结构来生成
      const rootItems = data.filter(item => item.id % 10 === 0);
      const childrenItems = data.filter(item => item.id % 10 !== 0);
      rootItems.forEach(item => {
        item.children = childrenItems.filter(child => child.id % 10 === item.id % 10);
      });
      this.tableData = rootItems;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      // 这里应该发起请求获取对应页的数据
    }
  }
};
</script>

这个代码实例展示了如何在Vue.js中使用ElementUI库创建一个带有动态树形结构的表格，并且表格数据可以通过分页组件进行分页。这个例子简单明了，并且注释充足，可以作为学习和教学的参考。