element ui 动态表格

Element UI提供了一个非常实用的组件来实现动态表格，即el-table。通过el-table，你可以实现表格的增删改查操作，并且可以根据需要自定义表格的样式和功能。

要创建一个动态表格，首先需要引入Element UI的依赖，并注册el-table组件。然后，在Vue的template中使用el-table组件，配置columns和data属性。

columns属性用于定义表格的列，每个列可以设置标题、字段名、宽度、对齐方式等。例如：

<template>
  <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="address" label="地址"></el-table-column>
  </el-table>
</template>

data属性是一个数组，用于渲染表格的数据。在这个例子中，我们可以在Vue的data选项中定义一个tableData数组，并将其绑定到el-table的data属性上。

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京' },
        { name: '李四', age: 20, address: '上海' },
        { name: '王五', age: 22, address: '广州' },
      ]
    }
  }
}
</script>

通过以上配置，就可以创建一个简单的动态表格了。