wrote a table, in vue+element-ui, but table data should be associated with the above user-defined specification attributes to generate table data similar to permutation and combination. Specification attributes can be added, deleted, changed, and table data can be manipulated. After n-long struggles, table data can finally be rendered, but because the latter fixed table attribute and the previous user-defined attribute are two different parts, they are put together. As soon as I change the specification attributes, the custom attributes can be arranged and combined to render, but the following data will be confused, and the fixed attribute data will be arranged from top to bottom instead of arrangement and combination. Ask God for advice on how to solve the problem. How to make table data automatically generate in response to changes in specification attributes. Thank you very much

<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;iPP){
        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;iPP){
        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);
    })
    //
    var td1 = [];
    var td2 = [];
    var td3 = [];
    var oTd = [];
    for (let i = 0; i < otdData.length; iPP) {
        for (let w = 0; w < otdData[0].length; wPP) {
            if( 1 < otdData.length ) {
                for (let q = 0; q < otdData[1].length; qPP) {
                    if( 2 < otdData.length ) {
                        for (let e = 0; e < otdData[2].length; ePP) {
                            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 = [];
    }
    //
    var oId={};
    var oItem={};
    var cloneTable=[];
    if(oTd.length){
        for (let i = 0; i < oTd[0].length; iPP) {
            for(let k = 0; k < oTd.length; kPP){
                // 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)
}