項目中采用 vue + elementui 開發，表格要求動態合並。
前一篇文章《element-ui table動態列合並--支持多個列 開箱即用》（網址：https://www.cnblogs.com/smile-fanyin/p/13566337.html）的內容相當於靜態展示，定義好方法，拿來數據展示就行。
而項目中的表格要求動態操作。所以根據前一篇文章的基礎，改進而來。
需求：
1、以事項列為主操作，可以向下合並，可以無限向下合並；
2、事項列合並的同時，操作、序號、歷史情況、本次調整原因、狀態、審批流程列跟着變化，授權節點列不變化；
3、事項描述列比較特殊，可以自己單獨合並，也可以不合並，但是前提是必須是在事項合並的行數范圍內。因為事項描述 歸屬於 事項，所以事項描述列合並的時候，不能跨不同的事項行。
4、關於操作：首列的操作可以增加一行，也可以刪除一行。事項描述列可以添加，也可以刪除。
代碼如下：
<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>