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();
      }
    },

你可能感兴趣的:(javascript,vue.js,css)