element 实现动态表格代码

当使用 Element UI 实现动态表格时，你可以按照以下步骤进行：

1. 首先，引入 Element UI 的组件和样式。确保你已经安装了 Element UI 并正确引入了相关的 CSS 和 JS 文件。

2. 在你的 Vue 组件中，创建一个 data 属性，用于存储表格的数据和列定义。例如：

data() {
  return {
    tableData: [], // 存储表格数据
    tableColumns: [ // 表格列定义
      { label: '姓名', prop: 'name' },
      { label: '年龄', prop: 'age' },
      { label: '性别', prop: 'gender' }
    ]
  }
}

3. 在模板中使用 el-table 和 el-table-column 组件来渲染表格。通过 v-for 指令循环渲染列定义和表格数据。例如：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column v-for="column in tableColumns" :key="column.prop" :label="column.label" :prop="column.prop"></el-table-column>
    </el-table>
  </div>
</template>

4. 在 Vue 的生命周期钩子函数（如 mounted）中，通过异步请求或其他方式获取表格数据，并将其赋值给 tableData 属性。例如：

mounted() {
  // 发起异步请求获取表格数据
  fetchData().then(response => {
    this.tableData = response.data;
  });
}

这样，你就可以使用 Element UI 实现动态表格了。根据你的具体需求，你可能还需要处理分页、排序、编辑等功能。Element UI 提供了丰富的 API 和事件供你使用。你可以参考 Element UI 的官方文档和示例来了解更多用法和功能。