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

需求：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 弄",
    }
]

鉴定完毕，欢迎友友们一起交流学习！！