el-table表格动态渲染行和列

在Vue.js中，可以使用Element UI库中的el-table组件来动态渲染表格。以下是一个简单的例子，展示如何根据数据动态渲染行和列：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :prop="column.prop"
      :label="column.label">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: 'Tom', address: 'No.189, Grove St, Los Angeles' },
        { date: '2016-05-04', name: 'Jerry', address: 'No.189, Grove St, Los Angeles' }
      ],
      columns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' }
      ]
    };
  }
};
</script>

在这个例子中，tableData 是要渲染的数据数组，而 columns 定义了表格的列信息，包括列的标签和对应的数据属性。el-table 组件使用 :data 属性绑定 tableData，而 el-table-column 组件则通过 v-for 指令动态渲染，并使用 :prop 和 :label 分别绑定 columns 数组中的对象属性。