首先需要有列表的数据数组和表头的数组,然后循环表头数组,把表头和数据数组对应的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>