vue elementui中el-table 动态合并行 数组去重

数组下对象去重

// 去重
let obj={}
this.dataList=this.dataList.reduce((item,next)=>{
  obj[next.projectcode]?'':obj[next.projectcode]=true&&item.push(next)
  return item
},[])

el-table 改变第几行字体颜色

<el-table
  :data="dataList"
  border
  style="width: 100%"
  :span-method="objectSpanMethod"
  :header-cell-style="tableHeaderColor"
>
</el-table>
// lable红色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
  if (rowIndex === 1) { // 行
    return "color: red;";
  }
},

el-table 动态合并行

<el-table
  :data="dataList1"
  border
  style="width: 100%"
  :span-method="objectSpanMethod"
  :header-cell-style="tableHeaderColor"
>
</el-table>

// 合并
objectSpanMethods({ row, column, rowIndex, columnIndex }) {
 // console.log( row, column, rowIndex, columnIndex );
 if (
   column.label == "内容" ||
   column.label == "单价" ||
   column.label == "数量"
 ) {
   // console.log(columnIndex);
 } else {
   // console.log([columnIndex].includes(columnIndex));
   if ([columnIndex].includes(columnIndex)) {
     // console.log(this.rowspan);
     const _row = this.rowspan[rowIndex];
     const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了，这列也隐藏
     // console.log( _row,_col);
     return {
       rowspan: _row,
       colspan: _col,
     };
   }
 }
},
// 动态获取  第几行开始合并   合并几行 
convertTableData() {
 let data = this.dataList1s;
 let arr = [];
 let rowspan = [];
 data.forEach((item) => {
   //debugger
   for (let i = 0; i < item.data.length; i++) {
     let rdata = {
       ...item,
       ...item.data[i],
     };
     rdata.combineNum = item.data.length;
     delete rdata.data;
     // rdata={ id: 1,name: "name-1",amount: 1003}
     arr.push(rdata);
     // 生成合并信息的数组 [3, 0, 0, 2, 0, 4, 0, 0, 0] 其中的0代表隐藏
     if (i == 0) {
       rowspan.push(item.data.length);
     } else {
       rowspan.push(0);
     }
   }
 });
 // console.log(arr)
 this.dataList1 = arr;
 // console.log(this.dataList1);
 // console.log(rowspan);
 this.rowspan = rowspan;
},    
// 接收导入数据  在获取到数据后调用convertTableData()
getDataList1(val) {
 console.log(val);
 if (val) {
   val.map((item) => {
     this.dataList1s.push(item);
   });
   this.convertTableData();
 }
},

标签：el,vue,console,log,elementui,item,rowspan,data,columnIndex
来源： https://blog.csdn.net/m0_60206780/article/details/121751584