如何使用Vue和Element-UI创建动态加载数据的表格

// 安装Vuenpm install vue// 引入Vueimport Vue from 'vue'// 安装Element-UInpm install element-ui// 引入Element-UIimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'// 使用Element-UIVue.use(ElementUI)

<template>  <div>    <el-table :data="tableData" style="width: 100%">      <el-table-column prop="name" label="姓名"></el-table-column>      <el-table-column prop="age" label="年龄"></el-table-column>      <el-table-column prop="gender" label="性别"></el-table-column>    </el-table>    <el-pagination      @size-change="handleSizeChange"      @current-change="handleCurrentChange"      :page-size="pageSize"      :total="total"      layout="prev, pager, next"      style="margin-top: 20px"    >    </el-pagination>  </div></template><script>export default {  data() {    return {      tableData: [],      currentPage: 1,      pageSize: 10,      total: 0    }  },  created() {    this.getData()  },  methods: {    getData() {      // 发送请求获取数据      // 这里假设我们通过接口获取了一个包含多条数据的数组      // 假设接口返回的数据格式为：{ data: [], total: 0 }      // data是一个数组，total是数据的总数      // 这里省略了具体的请求代码      const response = { data: [{ name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }], total: 2 }            this.tableData = response.data      this.total = response.total    },    handleSizeChange(size) {      this.pageSize = size      this.getData()    },    handleCurrentChange(page) {      this.currentPage = page      this.getData()    }  }}</script>

// 引入我们之前创建的组件import DynamicTable from './DynamicTable.vue'// 创建Vue实例new Vue({  el: '#app',  components: {    DynamicTable  },  template: '<DynamicTable />'})