用vue+element-ui寫了一個table，但是table數(shù)據(jù)要和上面的用戶自定義規(guī)格屬性相關聯(lián)，生成類似排列組合的table數(shù)據(jù)，規(guī)格屬性可增，刪，改，table數(shù)據(jù)可以操作，經過n久的掙扎，table數(shù)據(jù)終于可以渲染出來了，但是因為后面的固定table屬性和前面的用戶自定義屬性是兩個不同的部分，是拼上去的，我一改規(guī)格屬性，自定義屬性可以排列組合渲染出來，但是后面的數(shù)據(jù)就會錯亂，后面的固定屬性數(shù)據(jù)是從上到下依次排列的，而不是排列組合，求大神指點改怎么解決。怎么讓table數(shù)據(jù)自動響應規(guī)格屬性的變化而生成。萬分感謝

<el-table :data="tableDatas.slice((currentPage-1)*pageSize,currentPage*pageSize)">
    <el-table-column  v-for="customProp in customProps" :key="customProp.prop" :prop="customProp.prop" :label="customProp.label" align="center"></el-table-column>
    <el-table-column  v-for="tableProp in tableProps" :key="tableProp.prop" :prop="tableProp.prop" :label="tableProp.label" align="center">
        <template slot-scope="scope">
            <el-input type="text" v-model="scope.row[tableProp.prop]"></el-input>
        </template>
    </el-table-column>
    <el-table-column prop="sale" label="銷量" align="center"></el-table-column>
    <el-table-column label="屬性圖" align="center">
        <template slot-scope="scope" > 
            <el-upload
                action="/res-upload/upload?dir=/test/1"
                :show-file-list="false"
                :on-success="uploadItem">
                <img class="tableImg" v-if="scope.row.pic1" :src="scope.row.pic1">
                <el-button v-else type="primary" size="small" @click="uploadBtn(scope.$index)">上傳</el-button>
            </el-upload>
        </template>
    </el-table-column>
</el-table>

//添加主屬性
addCustomProp(){
    var addData={
        prop:"",
        label:"",
        val:[]
    }
    this.customProps.push(addData)
},
//實際添加主屬性
createCustomProp(label,index){
    for(var i=0;i<this.customProps.length;i++){
        if(this.customProps[i].label==label&&i!=index){
            this.commonFuns.errorAlert(this,"不能添加重復屬性");
            this.customProps.splice(index,1);
            break;
        }else{
            this.customProps[i].prop=this.customProps[i].label;
        }
    }
},
//添加子屬性
addCustomPropVal(index){
    var addData={
        prop:this.customProps[index].label,
        label:""
    }
    this.customProps[index].val.push(addData);
},
//實際添加子屬性
createCustomPropVal(label,parentIndex,index){
    for(var i=0;i<this.customProps[parentIndex].val.length;i++){
        if(this.customProps[parentIndex].val[i].label==label&&i!=index){
            this.commonFuns.errorAlert(this,"不能添加重復屬性");
            this.customProps[parentIndex].val.splice(index,1);
            break;
        }
    }
    this.renderTable();
},
//刪除主屬性
delCustomProp(label,index){
    this.customProps.splice(index,1);
    this.renderTable();
},
//刪除子屬性
delCustomPropVal(label,parentIndex,index){
    this.customProps[parentIndex].val.splice(index,1);
    for(var i=this.tableDatas.length-1;i>=0;i--){
        for(var key in this.tableDatas[i]){
            if(this.tableDatas[i][key]==label){
                this.tableDatas.splice(i,1)
                break;
            }
        }
    }
},
renderTable(parentIndex,index){
    // this.tableDatas  = [];
    var otdData = [];
    // console.log(this.customProps)
    this.customProps.forEach(function (item, index) {
        otdData.push(item.val);
    })
    //生成縱向表格數(shù)據(jù)
    var td1 = [];
    var td2 = [];
    var td3 = [];
    var oTd = [];
    for (let i = 0; i < otdData.length; i++) {
        for (let w = 0; w < otdData[0].length; w++) {
            if( 1 < otdData.length ) {
                for (let q = 0; q < otdData[1].length; q++) {
                    if( 2 < otdData.length ) {
                        for (let e = 0; e < otdData[2].length; e++) {
                            switch(i)
                            {
                                case 0:
                                    td1.push(otdData[i][w]);
                                    break;
                                case 1:
                                    td2.push(otdData[i][q]);
                                    break;
                                case 2:
                                    td3.push(otdData[i][e]);
                                    break;
                                default:
                                    break;
                            }
                        }
                    }else{
                        switch(i)
                        {
                            case 0:
                                td1.push(otdData[i][w]);
                                break;
                            case 1:
                                td2.push(otdData[i][q]);
                                break;
                            default:
                                break;
                        }
                    }
                }
            }else{
                td1.push(otdData[i][w]);
            }
        }
        switch(i)
        {
            case 0:
                oTd.push (td1);
                break;
            case 1:
                oTd.push (td2);
                break;
            case 2:
                oTd.push (td3);
                break;
            default:
                break;
        }
        td1 = [];
        td2 = [];
        td3 = [];
    }
    //生成橫向表格數(shù)據(jù)，加入默認欄目內容
    var oId={};
    var oItem={};
    var cloneTable=[];
    if(oTd.length){
        for (let i = 0; i < oTd[0].length; i++) {
            for(let k = 0; k < oTd.length; k++){
                // if(this.tableDatas[i]){
                //     oId = {
                //         // costPrice:"",
                //         originalprice:this.tableDatas[i].originalprice,
                //         presentprice:this.tableDatas[i].presentprice,
                //         inventory:this.tableDatas[i].inventory,
                //         code:this.tableDatas[i].code,
                //         barcode:this.tableDatas[i].barcode,
                //         sale:this.tableDatas[i].sale,
                //         pic1:this.tableDatas[i].pic1,
                //         [oTd[k][i].prop] : oTd[k][i].label
                //     };
                // }else{
                    oId = {
                        // costPrice:"",
                        originalprice:0,
                        presentprice:0,
                        inventory:0,
                        code:"",
                        barcode:"",
                        sale:0,
                        pic1:"",
                        [oTd[k][i].prop] : oTd[k][i].label
                    };
                // }
                oId["standard"+(k+1)+"value"]=oTd[k][i].label;
                oItem = Object.assign(oItem, oId);
                oId = {};
            }
            cloneTable.push(oItem);
            oItem = {};
        }
    }
    this.tableDatas=cloneTable;
    // console.log(this.tableDatas)
}