基于element- table 实现表格动态数据，表头渲染

首先需要有列表的数据数组和表头的数组，然后循环表头数组，把表头和数据数组对应的key赋给prop

<template>
<!-- 基于element的动态表头实现 -->
  <div>
    <el-table :data="dataSource" style="width: 100%">
      <el-table-column v-for="(item) in columns" :prop="item.key" :label="item.title" width="180" :key="item.key">
      <template slot-scope="scope">
        <span v-if="item.key == 'name'">{{scope.row.name +'你好'}}</span>
        <span v-else>{{scope.row[item.key]}}</span>
      </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        {
          key: "1",
          name: "胡彦斌",
          age: 32,
          address: "西湖区湖底公园1号",
        },
        {
          key: "2",
          name: "胡彦祖",
          age: 42,
          address: "西湖区湖底公园1号",
        },
        {
          key: "1",
          name: "胡彦斌",
          age: 32,
          address: "西湖区湖底公园1号",
        },
        {
          key: "2",
          name: "胡彦祖",
          age: 42,
          address: "西湖区湖底公园1号",
        },
      ],
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "年龄",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "住址",
          dataIndex: "address",
          key: "address",
        },
      ],
    };
  },
};
</script>