其他分享
首页 > 其他分享> > element-ui table动态合并列(附完整代码)

element-ui table动态合并列(附完整代码)

作者:互联网

项目中采用 vue + elementui 开发,表格要求动态合并。

前一篇文章《element-ui table动态列合并--支持多个列 开箱即用》(网址:https://www.cnblogs.com/smile-fanyin/p/13566337.html)的内容相当于静态展示,定义好方法,拿来数据展示就行。

而项目中的表格要求动态操作。所以根据前一篇文章的基础,改进而来。代码如下:

<template>
    <div>
        <!-- <h4>测试单元格合并</h4> -->
        <el-table
            :data="tableData"
            :span-method="arraySpanMethod"
            border stripe
            style="width: 98%; margin: 20px auto">
            <!-- 操作 -->
            <el-table-column label="操作" align="center" width="60" prop="operate">
                <template slot-scope="scope">
                    <i class="el-icon-circle-plus" @click="handleAdd(scope.$index, scope.row)"></i>
                    <i class="el-icon-remove" @click="handleDelete(scope.$index, scope.row)" ></i>
                </template>
            </el-table-column>
            <!-- 序号 -->
            <el-table-column align="center" label="序号" min-width="50" prop="serialNumber">
                <template slot-scope="scope">
                    {{scope.$index}}
                </template>
            </el-table-column> 
            <!--事项-->
            <el-table-column label="事项" prop="item" min-width="150" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.item}}</span><br/>
                    <el-button size="mini" @click="item__mergeNextRow(scope.$index, scope.row)">合并</el-button>
                    <el-button size="mini" @click="item__splitRow(scope.$index, scope.row)">拆分</el-button>
                </template>
            </el-table-column>
            <!-- 事项描述 -->
            <el-table-column v-for="(col,indexDesc) in itemDesc_header" :key="indexDesc" min-width="150" align="center" :prop="col.mark">
                <!-- 表头 table_head -->
                <template slot="header">
                    {{col.name}}<br/>
                    <i class="el-icon-circle-plus" @click="itemDescAdd(indexDesc, col)"></i>
                    <i class="el-icon-remove" @click="itemDescDelete(indexDesc, col)"></i>
                </template>
                <!-- 表体 table_body -->
                <template slot-scope="scope" >
                    <span v-if="false">{{scope.row}}</span>
                    <span>{{scope.row.itemDesc[indexDesc]['name']}}</span><br/>

                    <el-button size="mini" type="warning" @click="itemDesc__mergeNextRow(scope.$index, scope.row, indexDesc)">合并</el-button>
                    <el-button size="mini" type="danger" @click="itemDesc__splitRow(scope.$index, scope.row, indexDesc)">拆分</el-button>
                    <el-button size="mini" v-if="0" type="success" @click="editDescName(scope.$index, scope.row, indexDesc)">修改描述名字</el-button>

                </template>
            </el-table-column>
            <!-- 授权节点 -->
            <el-table-column align="center" label='授权节点' prop="authNode" min-width="100">
                <template slot-scope="scope">
                    {{scope.row.authNode}}
                </template>
            </el-table-column>
            <!-- 历史情况 -->
            <el-table-column align="center" label='历史情况' prop="history" min-width="100">
                <template slot-scope="scope">
                    {{scope.row.history}}
                </template>
            </el-table-column>
            <!-- 本次调整原因 -->
            <el-table-column align="center" label='本次调整原因' prop="reason" min-width="100">
                <template slot-scope="scope">
                    {{scope.row.reason}}
                </template>
            </el-table-column>
            <!-- 状态 -->
            <el-table-column align="center" label='状态' prop="status" min-width="100">
                <template slot-scope="scope">
                    {{scope.row.status}}
                </template>
            </el-table-column>
            <!-- 审批流程 -->
            <el-table-column align="center" label='审批流程' prop="process" min-width="100">
                <template slot-scope="scope">
                    {{scope.row.process}}
                </template>
            </el-table-column>
            
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 模拟后台返回数据
            tableData: [
                {item: '事项 1',itemDesc_my: '描述 1',authNode: '节点 1',history: '历史 1',reason: '原因 1',status: '状态 1',process: '流程 1',
                    same:"",initMergeRow:false, //自定义的合并变量(针对事项、历史情况、本次调整原因、状态、审批流程)
                    itemDesc:[  // uniqueDesc1:"",initMergeCell:false 是针对事项描述的合并变量
                        {name:"描述1-1",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述1-2",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述1-3",model:"1",uniqueDesc:"",initMergeCell:false}
                    ]
                },
                {item: '事项 2',itemDesc_my: '描述 2',authNode: '节点 2',history: '历史 2',reason: '原因 2',status: '状态 2',process: '流程 2',same:"",initMergeRow:false,
                    itemDesc:[
                        {name:"描述2-1",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述2-2",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述2-3",model:"1",uniqueDesc:"",initMergeCell:false}
                    ]
                },

                {item: '事项 3',itemDesc_my: '描述 3',authNode: '节点 3',history: '历史 3',reason: '原因 3',status: '状态 3',process: '流程 3',same:"",initMergeRow:false,
                    itemDesc:[
                        {name:"描述3-1",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述3-2",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述3-3",model:"1",uniqueDesc:"",initMergeCell:false}
                    ]
                },
                {item: '事项 4',itemDesc_my: '描述 4',authNode: '节点 4',history: '历史 4',reason: '原因 4',status: '状态 4',process: '流程 4',same:"",initMergeRow:false,
                    itemDesc:[
                        {name:"描述4-1",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述4-2",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述4-3",model:"1",uniqueDesc:"",initMergeCell:false}
                    ]
                },
                {item: '事项 5',itemDesc_my: '描述 5',authNode: '节点 5',history: '历史 5',reason: '原因 5',status: '状态 5',process: '流程 5',same:"",initMergeRow:false,
                    itemDesc:[
                        {name:"描述5-1",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述5-2",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述5-3",model:"1",uniqueDesc:"",initMergeCell:false}
                    ]
                },
                {item: '事项 6',itemDesc_my: '描述 6',authNode: '节点 6',history: '历史 6',reason: '原因 6',status: '状态 6',process: '流程 6',same:"",initMergeRow:false,
                    itemDesc:[
                        {name:"描述6-1",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述6-2",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述6-3",model:"1",uniqueDesc:"",initMergeCell:false}
                    ]
                },
                {item: '事项 7',itemDesc_my: '描述 7',authNode: '节点 7',history: '历史 7',reason: '原因 7',status: '状态 7',process: '流程 7',same:"",initMergeRow:false,
                    itemDesc:[
                        {name:"描述7-1",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述7-2",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述7-3",model:"1",uniqueDesc:"",initMergeCell:false}
                    ]
                },
                {item: '事项 8',itemDesc_my: '描述 8',authNode: '节点 8',history: '历史 8',reason: '原因 8',status: '状态 8',process: '流程 8',same:"",initMergeRow:false,
                    itemDesc:[
                        {name:"描述8-1",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述8-2",model:"1",uniqueDesc:"",initMergeCell:false},
                        {name:"描述8-3",model:"1",uniqueDesc:"",initMergeCell:false}
                    ]
                },
                
            ],
            // 有合并项的列 (事项、历史、原因、状态、流程)
            needMergeArr: ["same"], 
            needMergeArr_desc:["uniqueDesc"],
            
            rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象(事项等,不包括事项描述)
            rowMergeArrs_desc: {}, // 包含需要一个或多个合并项信息的对象(事项描述)

            //GMOA数据
            itemDesc_header:[ //事项描述的表头数据
                {"name":"事项描述","model":"1","mark":""},
                {"name":"事项描述","model":"1","mark":""},
                {"name":"事项描述","model":"1","mark":""}
            ],
            isStart:false,  //记录是否开始事项等合并的操作
            isDescStart:false,  //记录是否开始事项等合并的操作

        }
    },
    mounted(){
        this.addMark(this.itemDesc_header);
    },
    methods: {
        /**
         * 合并单元格的公共方法
         */
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            // 没办法循环判断具体是那一列 所以就只好写了多个if 
            if (column.property === 'operate')  return this.mergeAction('same', rowIndex, column);  //合并 操作
            if (column.property === 'serialNumber')  return this.mergeAction('same', rowIndex, column);  //合并 序号
            if (column.property === 'item')     return this.mergeAction('same', rowIndex, column);  //合并 事项
            if (column.property === 'history')  return this.mergeAction('same', rowIndex, column);  //合并 历史情况
            if (column.property === 'reason')   return this.mergeAction('same', rowIndex, column);  //合并 调整原因
            if (column.property === 'status')   return this.mergeAction('same', rowIndex, column);  //合并 状态
            if (column.property === 'process')  return this.mergeAction('same', rowIndex, column);  //合并 审批流程
            //循环判断合并 事项描述
            for( let m=0; m<this.itemDesc_header.length; m++ ){
                if (column.property === ('mark'+m) )  return this.mergeAction('uniqueDesc', rowIndex, column, m); 
            }
        },

        mergeAction(val, rowIndex, colData, indexDesc) {  
            if( val == "uniqueDesc" && this.isDescStart ){   //事项描述合并
                if(this.rowMergeArrs_desc[indexDesc]){
                    let _row = this.rowMergeArrs_desc[indexDesc][val].rowArr[rowIndex];
                    let _col = _row > 0 ? 1 : 0;
                    return [_row, _col];
                }           
            }else if( val == "same" && this.isStart ){  //非事项描述合并
                let _row = this.rowMergeArrs[val].rowArr[rowIndex];
                let _col = _row > 0 ? 1 : 0;
                return [_row, _col];
            }
        },

        rowMergeHandle(arr, data, isDescOperate, indexDesc) { 

            if (!Array.isArray(arr) && !arr.length) return false;
            if (!Array.isArray(data) && !data.length) return false;
            
            // 非事项描述的合并操作
            if( !isDescOperate ){  
                let needMerge = {}; 
                arr.forEach(i => { // i 为 "same"
                    needMerge[i] = {
                        rowArr: [],
                        rowMergeNum: 0
                    };
                    data.forEach((item, index) => { 
                        // 表格首个数据单独处理
                        if (index === 0) {
                            needMerge[i].rowArr.push(1);
                            needMerge[i].rowMergeNum = 0;
                        } else {
                            // 如果后一项与前一项相等,只用改变 rowArr 数组,不用管 rowMergeNum 数值
                            if ( (item[i]===data[index - 1][i]) && (item[i]!="") && (data[index - 1][i]!="") ) {
                                needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1; //此处是 rowMergeNum 属性存在的意义,就是为了定位要改变的数值
                                needMerge[i].rowArr.push(0);
                            } 
                            //如果后一项与前一项不相等,rowArr、rowMergeNum都改变
                            else {
                                needMerge[i].rowArr.push(1);
                                needMerge[i].rowMergeNum = index;
                            }
                        }
                    });
                });
                return needMerge;
            }
            //事项描述的操作
            else if(isDescOperate){  
                let needMerge = {};
                arr.forEach(i => {  // i 为 "uniqueDesc"
                    needMerge[i] = {
                        rowArr: [],
                        rowMergeNum: 0
                    };
                    data.forEach((item, index) => { 
                        if (index === 0) {
                            needMerge[i].rowArr.push(1);
                            needMerge[i].rowMergeNum = 0;
                        } else {
                            if ( 
                                (item["itemDesc"][indexDesc][i]===data[index - 1]["itemDesc"][indexDesc][i]) 
                                && (item["itemDesc"][indexDesc][i]!="") 
                                && (data[index - 1]["itemDesc"][indexDesc][i]!="") 
                            ) { 
                                needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                                needMerge[i].rowArr.push(0);
                            } 
                            else {
                                needMerge[i].rowArr.push(1);
                                needMerge[i].rowMergeNum = index;
                            }
                        }
                    });
                });
                this.rowMergeArrs_desc[indexDesc] = needMerge;
                return this.rowMergeArrs_desc;
            }
        },
        
        /** 
         * GMOA 的方法
         */
        // 操作新增
        handleAdd(index, row){
            //动态添加判断 表体 部分的事项描述
            let itemDesc = [];
            this.itemDesc_header.forEach(val=>{
                itemDesc.push(
                    {name:"描述 add",model:"1",uniqueDesc:"",initMergeCell:false}
                )
            })
            //如果没有操作合并行,就新增数据
            if( !this.isStart ){
                this.tableData.splice(index+1,0,{
                    item: '事项 add',itemDesc: '描述 add',authNode: '节点 add',history: '历史 add',reason: '原因 add',status: '状态 add',process: '流程 add',same:"",initMergeRow:false,
                    itemDesc:itemDesc
                });
                return;
            }
            //如果新增是在操作合并行之后
            let deletedRowNum = this.getMergeRowNum(index,this.rowMergeArrs['same']['rowArr']);
            this.tableData.splice(index+deletedRowNum+1,0,{
                item: '事项 add',itemDesc: '描述 add',authNode: '节点 add',history: '历史 add',reason: '原因 add',status: '状态 add',process: '流程 add',same:"",initMergeRow:false,
                itemDesc:itemDesc
            });
            this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
            this.itemDesc_header.forEach( (val,i)=>{
                this.rowMergeArrs_desc = this.rowMergeHandle(this.needMergeArr_desc, this.tableData,true,i);
            })
            if(this.itemDesc_header.length){    //此处再加上表格数据的判断
                this.editDescName(0, {}, 0);
            }
        },
        //操作删除
        handleDelete(index, row){
            //如果没有操作合并行,就删除数据
            if( !this.isStart ){
                this.tableData.splice(index,1);
                return;
            }
            //如果删除是在操作合并行之后
            let deletedRowNum = this.getMergeRowNum(index,this.rowMergeArrs['same']['rowArr']);
            this.tableData.splice(index,deletedRowNum+1);
            this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData); 
        },
        // 公共的函数:获取当前行下面被合并的行数
        getMergeRowNum(index,arr){
            let num = 0 ; //记录被合并(删除)的行数
            for( let k = index+1;k<arr.length;k++ ){
                if( arr[k]==0 ){
                    num++;
                }else{
                    break;
                }
            }
            console.log("被合并的行数为:",num);
            return num;
        },
        //公共的函数:给事项描述的表头数据加 mark 标记
        addMark(data){
            for(let k=0;k<data.length;k++){
                data[k]["mark"] = "mark"+k;
            }
            // console.log("表头数据:",data)
        },
        //事项: 向下合并一行  ***** 五星
        item__mergeNextRow(index, row){
            console.log("%c**********方法调用*********》》》事项: 向下合并一行",'background:pink;color:red;font-weight:bold');
            console.log(index, row);
            //如果是最后一行,不允许合并
            if( index==this.tableData.length-1 ){
                this.$message.error('最后一行,禁止合并');
                return;
            }
            //首次合并一行(即 合并完成后,是2个单行合并为1个大行)
            if( !this.tableData[index]["initMergeRow"] && !this.tableData[index+1]["initMergeRow"] ){  
                console.log("首次合并");
                this.isStart = true;
                this.tableData[index]["initMergeRow"] = true;
                this.tableData[index]["same"] = "same"+index;
                this.tableData[index+1]["same"] = "same"+index;
                this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData); // 处理数据
            }
            //非首次合并 (结合 rowMergeArrs 的值进行判断)
            else{
                console.log("非!!!首次合并");
                //前提:首选判断 rowMergeArrs 中 rowArr 的值,判断出合并的行数
                let deletedRowNum = this.getMergeRowNum(index,this.rowMergeArrs['same']['rowArr'])
                //情形一:如果是最后的数据,禁止合并
                if( !this.tableData[index+deletedRowNum+1] ){
                    this.$message.error('最后一行,禁止合并');
                return;
                }
                //情形二:禁止跨 “合并大行” 合并(即 next 行非单行,禁止合并) 
                if( this.tableData[index+deletedRowNum+1]["initMergeRow"]==true ){
                    this.$message.error('跨大行,禁止合并');
                }
                //情形三:next 行是单行,允许合并
                if( this.tableData[index+deletedRowNum+1]["initMergeRow"]==false ){
                    this.tableData[index+deletedRowNum+1]["same"] = "same"+index;
                    this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData); // 处理数据
                }
            }
            console.log(this.tableData)
        },
        //事项: 拆分事项
        item__splitRow(index, row){
            //情形一:如果没有合并行,就执行拆分操作
            if( !this.isStart ){
                this.$message.error('此行没有合并,禁止拆分');
                return;
            }
            //情形二:有合并行操作,但是拆分的是单行(即拆分的不是合并的单元格)
            if( this.tableData[index]["initMergeRow"]==false){
                this.$message.error('单行,禁止拆分');
            }
            //情形三:拆分合并行(即拆分的是大行),此处可以不用写if,但是为了代码整洁,还是加上判断
            if( this.tableData[index]["initMergeRow"]==true){
                let deletedRowNum = this.getMergeRowNum(index,this.rowMergeArrs['same']['rowArr']);
                console.log("拆分的此格,合并的行数为:",deletedRowNum);
                //把此处合并的表格数据每一项 same 值清空,initMergeRow 值改为 false
                for( let k=index; k<index+deletedRowNum+1; k++ ){
                    this.tableData[k]["same"] = "";
                    this.tableData[k]["initMergeRow"] = false;
                    this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
                }
                //处理事项描述的合并单元格,全部都拆分为单项
                for( let m=index; m<index+deletedRowNum+1; m++ ){
                    this.tableData[m]["itemDesc"].forEach(item=>{
                        item.uniqueDesc = "";
                        item.initMergeCell = false;
                    })
                }
                this.itemDesc_header.forEach( (val,i)=>{
                    this.rowMergeArrs_desc = this.rowMergeHandle(this.needMergeArr_desc, this.tableData,true,i);
                })
                if(this.itemDesc_header.length){    //此处再加上表格数据的判断
                    this.editDescName(0, {}, 0);
                }
            }
        },
        //事项描述:表头新增 
        itemDescAdd(indexDesc, col){
            this.itemDesc_header.splice(indexDesc+1,0,{"name":"事项描述","model":"1","mark":""});
            this.addMark(this.itemDesc_header);
            this.tableData.map(val=>{
                val["itemDesc"].splice(indexDesc+1,0,{
                    name:"描述 add"+indexDesc+1,model:"1",uniqueDesc:"",initMergeCell:false
                })
            });
            this.itemDesc_header.forEach( (val,i)=>{
                this.rowMergeArrs_desc = this.rowMergeHandle(this.needMergeArr_desc, this.tableData,true,i);
            })
            if(this.itemDesc_header.length){    //此处再加上表格数据的判断
                this.editDescName(0, {}, 0);
            }
        },
        //事项描述:表头删除
        itemDescDelete(indexDesc, col){
            this.itemDesc_header.splice(indexDesc,1);
            this.tableData.map(val=>{
                val["itemDesc"].splice(indexDesc,1);
            })
            this.itemDesc_header.forEach( (val,i)=>{
                this.rowMergeArrs_desc = this.rowMergeHandle(this.needMergeArr_desc, this.tableData,true,i);
            })
            if(this.itemDesc_header.length){    //此处再加上表格数据的判断
                this.editDescName(0, {}, 0);
            }
            
        },
        //事项描述: 向下合并一行 ********** 十星
        itemDesc__mergeNextRow(index, row, indexDesc){
            console.log("%c**********事项描述:*********》》》 向下合并一行",'background:#0f0;color:#ADD8E6;font-weight:bold');
            console.log(index, row, indexDesc);
            //如果是最后一行,不允许合并
            if( index==this.tableData.length-1 ){
                this.$message.error('事项描述最后一行,禁止合并');
                return;
            }
            //如果事项没有合并,则 禁止合并
            if( !this.isStart ){
                this.$message.error('请先合并事项');
                return;
            }
            //如果:虽然合并了事项,但是都拆分了,则 禁止合并事项描述
            if( JSON.stringify(this.rowMergeArrs)!="{}" ){
                let arr = this.rowMergeArrs["same"]["rowArr"];
                let isAllSplit = arr.every(val=>{
                    return val ==1
                })
                if( isAllSplit ){
                    // this.$message.error('拆分过后的状态,请先合并事项');
                    this.$message.error('请先合并事项');
                    return;
                }
            }
            //开始合并,前提是判断是否在事项合并的范围内,所以先计算事项的合并行数
            let deletedRowNum = this.getMergeRowNum(index,this.rowMergeArrs['same']['rowArr']); 
            //如果此行的事项没有合并,则 禁止合并
            if(deletedRowNum==0){
                this.$message.error('事项不是合并状态 或者 跨事项,故禁止合并');
                return;
            }
            //如果此行的事项是合并状态, 则继续进行。
            //首次合并一行(即 合并完成后,是2个单行合并为1个大行)
            if( deletedRowNum>=1 && !this.tableData[index]["itemDesc"][indexDesc]["initMergeCell"] && !this.tableData[index+1]["itemDesc"][indexDesc]["initMergeCell"] ){  
                this.isDescStart = true;
                this.tableData[index]["itemDesc"][indexDesc]["initMergeCell"] = true;
                this.tableData[index]["itemDesc"][indexDesc]["uniqueDesc"] = "uniqueDesc"+index;
                this.tableData[index+1]["itemDesc"][indexDesc]["uniqueDesc"] = "uniqueDesc"+index;

                this.rowMergeArrs_desc = this.rowMergeHandle(this.needMergeArr_desc, this.tableData,true,indexDesc); // 处理数据
                this.editDescName(index, row, indexDesc);
            }
            //非首次合并 (结合 事项的合并行数 和 rowMergeArrs_desc 的值进行判断)
            else{
                //前提:首选判断 rowMergeArrs_desc 中 rowArr 的值,判断出合并的行数
                let deletedRowNum_Desc = this.getMergeRowNum(index,this.rowMergeArrs_desc[indexDesc]['uniqueDesc']['rowArr']);
                console.log("此列的事项描述合并的行数为:",deletedRowNum_Desc);
                //情形一:如果是最后的数据,禁止合并
                if( !this.tableData[index+deletedRowNum_Desc+1] ){
                    this.$message.error('最后一行了,禁止合并');
                    return;
                }
                //情形二:禁止跨 “合并大行” 合并(即 next 行非单行,禁止合并) 
                if( this.tableData[index+deletedRowNum_Desc+1]["itemDesc"][indexDesc]["initMergeCell"]==true ){
                    this.$message.error('跨大行了,禁止合并');
                    return;
                }
                //情形三:next 行是单行,允许合并(判断不超出事项合并行)
                if( deletedRowNum_Desc == deletedRowNum ){  //判断不能超出事项合并行
                    this.$message.error('描述合并行 不能 大于 事项合并行,所以禁止合并');
                    return;
                }
                if( this.tableData[index+deletedRowNum_Desc+1]["itemDesc"][indexDesc]["initMergeCell"]==false ){
                    this.tableData[index+deletedRowNum_Desc+1]["itemDesc"][indexDesc]["uniqueDesc"] = "uniqueDesc"+index;
                    this.rowMergeArrs_desc = this.rowMergeHandle(this.needMergeArr_desc, this.tableData,true,indexDesc);
                    this.editDescName(index, row, indexDesc);
                }
            }
            // console.log(this.tableData)
        },
        //事项描述: 拆分事项
        itemDesc__splitRow(index, row, indexDesc){
            //情形一:如果没有合并行,就执行拆分操作
            if( !this.isDescStart ){
                this.$message.error('无合并动作,禁止拆分');
                return;
            }
            //情形二:有合并行操作,但是拆分的是单行(即拆分的不是合并的单元格)
            if( this.tableData[index]["itemDesc"][indexDesc]["initMergeCell"]==false){
                this.$message.error('单行,禁止拆分');
            }
            //情形三:拆分合并行(即拆分的是大行),此处可以不用写if,但是为了代码整洁,还是加上判断
            if( this.tableData[index]["itemDesc"][indexDesc]["initMergeCell"]==true){
                let deletedRowNum_desc = this.getMergeRowNum(index,this.rowMergeArrs_desc[indexDesc]['uniqueDesc']['rowArr']);
                //把此处合并的表格数据每一项 same 值清空,initMergeRow 值改为 false
                for( let k=index; k<index+deletedRowNum_desc+1; k++ ){
                    this.tableData[k]["itemDesc"][indexDesc]['uniqueDesc'] = "";
                    this.tableData[k]["itemDesc"][indexDesc]["initMergeCell"] = false;
                    this.rowMergeArrs_desc = this.rowMergeHandle(this.needMergeArr_desc, this.tableData,true,indexDesc); // 处理数据
                    this.editDescName(index, row, indexDesc);
                }
            }
        },
        //测试修改数据,刷新表格
        editDescName(index,row,indexDesc){
            console.log(index,row,indexDesc);
            // this.tableData[index]["itemDesc"][indexDesc]["name"] = this.tableData[index]["itemDesc"][indexDesc]["name"]+ 'edit'
            let name = this.tableData[index]["itemDesc"][indexDesc]["name"];
            this.tableData[index]["itemDesc"][indexDesc]["name"] = "";
            this.tableData[index]["itemDesc"][indexDesc]["name"] = name;

        }

    },
    
}
</script>

<style scoped>
</style>

 

标签:index,initMergeCell,false,itemDesc,合并,element,ui,table,uniqueDesc
来源: https://www.cnblogs.com/smile-fanyin/p/13848401.html