element实现动态表头

前言

准备工作:引入element组件大家应该很熟悉啦,这里就不啰嗦了,直接上代码

HTML部分

<el-table height="calc(100vh - 300px)" :data="echartsList" :header-cell-style="{color:'#000000'}">
        <template v-for="item in echartsTabled">
            <el-table-column
                    :width="item.width? item.width : ''"
                    :fixed="item.width? true : false"
                    :key="item"
                    :label="item.tableNmae"
                    align="center"
            >
                <template slot-scope="scope" height="calc(100vh - 350px)">
                    <span>{{ scope.row[item.tableCode] }}</span>
                </template>
            </el-table-column>
        </template>
    </el-table>

JS部分

<script>
        //表头内容
        echartsTabled: [
            {
                tableNmae:'位置',
                tableCode:'weizhi'
            },
            {
                tableNmae:'应租面积(m²)',
                tableCode:'yingzu'
            },
            {
                tableNmae:'实租面积(m²)',
                tableCode:'shizu'
            },
            {
                tableNmae:'待租面积(m²)',
                tableCode:'daizu'
            },
            {
                tableNmae:'利用率',
                tableCode:'liyon'
            },
        ],
    // 表格内容
        echartsList: [
            {
                weizhi:'商务楼',
                yingzu:'20',
                shizu:'30',
                daizu:'40',
                liyon:'20%',
            },
            {
                weizhi:'公寓楼',
                yingzu:'20',
                shizu:'30',
                daizu:'40',
                liyon:'20%',
            },
            {
                weizhi:'办公楼',
                yingzu:'20',
                shizu:'30',
                daizu:'40',
                liyon:'20%',
            },
            {
                weizhi:'餐厅商铺',
                yingzu:'20',
                shizu:'30',
                daizu:'40',
                liyon:'20%',
            },
        ],
    </script>

结束

想必大家都能一眼看明白,其实就是根据表头数组里面的tableCode值去找内容数据里面对应的字段,大家可以直接复制粘贴能直接用~