elementui 动态表格

ElementUI 是一个基于 Vue.js 的组件库，它提供了很多常用的组件和工具，包括表格组件。ElementUI 的表格组件可以通过数据驱动来实现动态表格，具体步骤如下：

1. 定义表格的列属性，包括表头名称、字段名、对齐方式、宽度、排序等；
2. 定义表格的数据源，可以是静态数据或者通过 Ajax 请求获取的动态数据；
3. 将列属性和数据源绑定到表格组件中；
4. 可以通过表格组件提供的 API 来进行动态操作，例如增加、删除、编辑表格数据等等。

以下是一个简单的示例代码：

<template>
  <el-table :data="tableData">
    <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' }
      ]
    };
  }
};
</script>

在上面的代码中，我们定义了一个包含 3 列的表格，数据源是一个静态的数组。我们可以通过修改 tableData 数组来动态改变表格的内容。