项目中采用 vue + elementui 开发，表格要求动态合并。
前一篇文章《element-ui table动态列合并--支持多个列 开箱即用》的内容相当于静态展示，定义好方法，拿来数据展示就行。
而项目中的表格要求动态操作。所以根据前一篇文章的基础，改进而来。
需求：
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>
