elementUI的table动态生成列

我们将表头和tbody分开

<template>
    <div class="engconftab-wrap">
        <Top :title="title"></Top>
        <div class="table-content">
            <el-table :data="configTable"  style="width: 100%;">
                <el-table-column fixed prop="featureName" label="特征值"></el-table-column>
                <el-table-column  prop="featureCode" label="特征值编码"></el-table-column>
                <el-table-column  prop="family" label="特征族"></el-table-column>
                <el-table-column
                    v-for="(val,i) in configHeader"
                    :key="i"
                    :prop="val.props"
                    :label="val.label">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import Top from '../publice/Top'
export default {
    components:{
        Top
    },
    data(){
        return{
            title:'配置详情',
            configTable:[
                  {
                      1.8TGDI/6AT两驱舒适型:"S",
                      1.8TGDI/6AT两驱豪华型:"",
                      1.8TGDI/6AT四驱旗舰型:"-",
                      2.0TGDI/6AT两驱舒适型:"S",
                      family:"A2/车型系列",
                      featureCode:"A256",
                      featureName:"A256"

                  }
            ],
            configHeader:[
                  {
                       label:"1.8TGDI/6AT两驱豪华型",
                       props:"1.8TGDI/6AT两驱豪华型"

                  }
            ]
        }
    },
    created(){
        let id = this.$route.query.id;
        this.$http.post('/engineeringConfigMobile/findByProductNodeId' , { productNodeId : id } , res => {
            if (res.data) {
                
                this.configTable = res.data;

                let itemKey = Object.keys(this.configTable[0]);

                itemKey.forEach( key => {
                    
                    if (key != 'featureCode' && key != 'featureName' && key != 'family') {

                        

                        let headItem = {
                            props : key,
                            label : key
                        }
                        this.configHeader.push(headItem)

                    } else {
                        return
                    } 
                })

               
            }
        })
    },
    methods:{
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
        },
    },
}
</script>

<style lang="scss">
.table-content{
    padding: 110px 30px 0 30px;
    width:100%;
    box-sizing: border-box;
    
    th{
        >div{
            font-size: 24px;
            line-height: 66px !important;
        }
    }
    td{
        >div{
            font-size: 24px;
            line-height: 66px !important;
            &.cell{
                .el-table__expand-icon {
                    height: 66px;
                    line-height: 66px;
                    i{
                        z-index: 77;
                        display: inline-block;
                        line-height: 66px;
                        font-size: 30px;
                        top:0;

                    }
                }
            }
            
        }
    }
}
</style>

在data里面configHeader和configTable都是我最终想要的数据结构,这里我只是列举一个样式,因为前面3列是写死的props后面的都是动态生成的,所以我取的configTable[0]对数据做处理,然后获取相同的key存放到configHeader里面

                let itemKey = Object.keys(this.configTable[0]);

                itemKey.forEach( key => {
                    
                    if (key != 'featureCode' && key != 'featureName' && key != 'family') {

                        

                        let headItem = {
                            props : key,
                            label : key
                        }
                        this.configHeader.push(headItem)

                    } else {
                        return
                    } 
                })

数据绑定生成动态列

              <el-table-column
                    v-for="(val,i) in configHeader"
                    :key="i"
                    :prop="val.props"
                    :label="val.label">
                </el-table-column>

注意:这里会有一个小问题,因为后台返回的configTable的key里面有中文,那么就相当于是用中文做key,这样并不好会有的数据绑定不上去,我这边后期可以改为英文了,尽管有建议说用symbol处理一下数据,我试过了但是结果并不是很理想,所以开发联调时要记得跟后台说一下数据结构的规范