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();
 }
},
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值