vue element-ui的table渲染问题

Question

用vue+element-ui写了一个table，但是table数据要和上面的用户自定义规格属性相关联，生成类似排列组合的table数据，规格属性可增，删，改，table数据可以操作，经过n久的挣扎，table数据终于可以渲染出来了，但是因为后面的固定table属性和前面的用户自定义属性是两个不同的部分，是拼上去的，我一改规格属性，自定义属性可以排列组合渲染出来，但是后面的数据就会错乱，后面的固定属性数据是从上到下依次排列的，而不是排列组合，求大神指点改怎么解决。怎么让table数据自动响应规格属性的变化而生成。万分感谢

<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);
    })
    //生成纵向表格数据
    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 = [];
    }
    //生成横向表格数据，加入默认栏目内容
    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)
}

Answer 1

有个方案可以参考下：每次更改customProps和tableProps ，重新渲染表格。即用v-if来控制