Vue element-ui 动态生成自定义table表头实现数据渲染

 1   <el-table
 2     :data="tableData"
 3     border
 4     style="width: 100%"
 5     height="100%"
 6     :header-cell-style="{
 7       'background-color': '#F0F0F0',
 8       color: '#333',
 9       'font-weight': 'normal',
10     }"
11     ref="table"
12     v-loading="tableLoading"
13   >
14     <template v-for="(item, index) in tableHeader">
15       <el-table-column
16         :prop="item.englishName"
17         :key="index"
18         show-overflow-tooltip
19         align="center"
20       >
21         <template slot-scope slot="header">
22           <el-tooltip
23             effect="dark"
24             :content="item.chineseName"
25             placement="top"
26             class="table-header"
27           >
28             <span>{{ item.chineseName }}</span>
29           </el-tooltip>
30         </template>
31         <template slot-scope="scope">
32           <span
33             v-if="item.englishName == 'isError'"
34             :class="{ redColor: scope.row.isError }"
35           >
36             {{ scope.row.isError ? "是" : "否" }}
37           </span>
38           <span v-else>{{ scope.row[item.englishName] }}</span>
39         </template>
40       </el-table-column>
41     </template>
42     <el-table-column v-if="tableHeader.length" label="操作" fixed="right">
43       <template slot-scope="scope">
44         <el-button type="text" size="mini" @click="handleDetails(scope.row)"
45           >查看</el-button
46         >
47       </template>
48     </el-table-column>
49   </el-table>

 1 tableHeader:[
 2     {
 3         englishName: "date",
 4         chineseName: "日期"
 5     },
 6     {
 7         englishName: "name",
 8         chineseName: "姓名"
 9     },
10     {
11         englishName: "address",
12         chineseName: "地址"
13     }
14 ]

 1 [
 2   {
 3     date: "2016-05-02",
 4     name: "王小虎",
 5     address: "上海市普陀区金沙江路 1518 弄",
 6   },
 7   {
 8     date: "2016-05-04",
 9     name: "王小虎",
10     address: "上海市普陀区金沙江路 1517 弄",
11   },
12   {
13     date: "2016-05-01",
14     name: "王小虎",
15     address: "上海市普陀区金沙江路 1519 弄",
16   },
17   {
18     date: "2016-05-03",
19     name: "王小虎",
20     address: "上海市普陀区金沙江路 1516 弄",
21   }
22 ]