标签：index spanArr List 合并 element Finished ui 数组 row

直接上代码

这是页面代码

<el-row style="margin-left:-50px">
<el-col :sapn="24">
<el-form-item>
<h4 style="font-size:14px;margin:0 0 10px 0;">
成品报废明细表
</h4>
<el-table :data="Finished_M_List" border size="mini" :span-method="objectSpanMethod" style="text-align:center" >
<el-table-column prop="KUNNR" label="客户编号" width="100"></el-table-column>
<el-table-column prop="VKBUR" label="营业部门" width="100"></el-table-column>
<el-table-column prop="AUFNR" label="工单号" width="100"></el-table-column>
<el-table-column prop="MENGE" label="超PO数" width="80" ></el-table-column>
<el-table-column prop="ZCSMT" label="客户料号" width="100"></el-table-column>
<el-table-column prop="VBELN" label="销售订单号" width="100"></el-table-column>
<el-table-column prop="BDMNG" label="报废数量" width="80"></el-table-column>
<el-table-column prop="KOSTL" label="责任部门" width="80"></el-table-column>
<el-table-column prop="ZAMNT" label="报废金额" width="80"></el-table-column>
<el-table-column prop="WAERS" label="币别" width="80"></el-table-column>
<el-table-column prop="CHARG" label="批次" width="100"></el-table-column>
</el-table>
</el-form-item>
</el-col>
</el-row>

这是处理数据的代码

initFinished: function () {
var _this = this;
axios.get('/FinishedInventory_Sap/initFinished?WorkID=' + _this.viewModel.OID.value).then(function (res) {
_this.FinishedList = res.data.Data;

//复制源数据
_this.Finished_M_List = JSON.parse(JSON.stringify(_this.FinishedList));

//定义临时空数组，接收根据客户料号和销售订单号重新排序后的数组
let TemporaryList = [];
//遍历报废成品数组
for (let i = 0; i < _this.Finished_M_List.length; i++) {
//判断元素状态（初始状态为空，添加到临时数组后置1）
if (_this.Finished_M_List[i].STATE != 1) {
TemporaryList.push(_this.Finished_M_List[i])
_this.Finished_M_List[i].STATE = 1;
}
//从i+1个元素开始查找客户料号、销售订单号相同的元素
for (let j = i + 1; j < _this.Finished_M_List.length; j++) {
//已加入临时数组的元素不参与后续查找
if (_this.Finished_M_List[j].STATE != 1) {
if (_this.Finished_M_List[i].ZCSMT == _this.Finished_M_List[j].ZCSMT && _this.Finished_M_List[i].VBELN == _this.Finished_M_List[j].VBELN) {
TemporaryList.push(_this.Finished_M_List[j]);
_this.Finished_M_List[j].STATE = 1;
}
}
console.log(TemporaryList)
}

}
_this.Finished_M_List = JSON.parse(JSON.stringify(TemporaryList))
_this.rowspan();
})
}

这里是设置合并规则的代码

//设置合并规则
rowspan() {
// 在data里面定义
this.spanArr = []
// 在data里面定义
this.position = 0
console.log(this.Finished_M_List)
this.Finished_M_List.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1)
this.position = 0
// 设置序号
//item.sequence = index + 1;

} else {
if (this.Finished_M_List[index].ZCSMT === this.Finished_M_List[index - 1].ZCSMT && this.Finished_M_List[index].VBELN === this.Finished_M_List[index - 1].VBELN) {
// 连续有几行项目名名称相同
this.spanArr[this.position] += 1
// 名称相同后往数组里面加一项0
this.spanArr.push(0)

// 当项目名称相同时，设置当前序号和前一个相同
//this.Finished_M_List[index].sequence = this.Finished_M_List[index - 1].sequence
} else {
this.spanArr.push(1)
this.position = index
// 当项目名称不同时，将当前序号设置为前一个序号+1
//this.Finished_M_List[index].sequence = this.Finished_M_List[index - 1].sequence + 1
}
}
})
//console.log(this.spanArr)
}

}

最后是定义objectSpanMethod方法

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//通过给table传入span - method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、
//当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。
//也可以返回一个键名为rowspan和colspan的对象。
// 表格合并行
// 序号列也进行合并(第一列)
if (columnIndex === 3) {
// this.spanArr这个数组里面存的是table里面连续的有几条数据相同
// 例如:[1,1,2,0,2,0]
// 1 代表的没有连续的相同的
// 2 代表连续的两个相同
// 0 代表是和上一条内容相同
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}

}

标签：index,spanArr,List,合并,element,Finished,ui,数组,row
来源： https://www.cnblogs.com/ffjjt/p/14612108.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。