需求：
1）表头的数据是动态的，有可能字段值很长且很多。解决方案自定义动态表头，字段长使用文字提示【el-tooltip组件】；
2）需要对表格data中的数据值进行枚举转成中文值，且显示不同的颜色。
效果图：
直接上代码：
1、vue代码
<el-table
:data="tableData"
border
style="width: 100%"
height="100%"
:header-cell-style="{
'background-color': '#F0F0F0',
color: '#333',
'font-weight': 'normal'
}"
ref="table"
v-loading="tableLoading"
>
<template v-for="(item, index) in tableHeader">
<el-table-column
:prop="item.englishName"
:key="index"
show-overflow-tooltip
align="center"
>
<template slot-scope slot="header">
<el-tooltip
effect="dark"
:content="item.chineseName"
placement="top"
class="table-header"
>
<span>{{ item.chineseName }}</span>
</el-tooltip>
</template>
<template slot-scope="scope">
<span v-if="item.englishName=='sex'" :class="{ redColor: scope.row.sex }">
{{
scope.row.sex ? "男" : "女"
}}
</span>
<span v-else>{{ scope.row[item.englishName] }}</span>
</template>
</el-table-column>
</template>
<el-table-column v-if="tableHeader.length" label="操作" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleDetails(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
2、tableHeader的json格式
{
englishName: "date",
chineseName: "日期",
},
{
englishName: "name",
chineseName: "姓名",
},
{
englishName: "sex",
chineseName: "性别",
},
{
englishName: "address",
chineseName: "地址",
}
]
3、表格data的json格式
{
date: "2016-05-02",
name: "王小虎",
sex: 1,
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
sex: 1,
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
sex: 1,
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
sex: 1,
address: "上海市普陀区金沙江路 1516 弄",
}
]
鉴定完毕，欢迎友友们一起交流学习！！
