深入探讨 ElementUI 动态渲染 el-table

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="item in tableHeader"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableHeader: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' }
      ],
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '李小虎', address: '上海市普陀区金沙江路 1517 弄' },
        // ...更多数据
      ]
    };
  }
};
</script>

这个例子展示了如何使用ElementUI的el-table组件动态渲染列。tableHeader数组定义了表格的列信息，包括列的标签和对应的数据属性。tableData数组提供了表格的数据。这样，无论数据或列如何变化，表格都可以动态更新。