标签：el vue console log elementui item rowspan data columnIndex

数组下对象去重

// 去重
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

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