element table总结

设置table的样式

          :row-style="rowClass"
          :cell-style="cellClass"
          :header-cell-style="{textAlign:'center',background:'#ebeef4'}"

    rowClass ({ row, index }) {
      if (row.workarea === '小计' || row.workarea === '总计') {
        return 'font-weight:bold; color:red; text-align:center'
      } else {
        return 'text-align:center'
      }
    },
    cellClass ({ row, column, rowIndex, columnIndex }) {
      if (row.workarea === '小计' || row.workarea === '总计') {
        return 'font-weight:bold; color:#0a8dec;text-align:center'
      } else {
        return 'text-align:center'
      }
    },
//貌似设置字体颜色啥的得用cellcalass

合并单元格

//:span-method="objectSpanMethod" 写在table里面
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
//如果是第一列的话 spanArr放的是第一列应该合并第几行的
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
//如果是第二列的话 spanArr放的是第二列应该合并第几行的
      if (columnIndex === 1) {
        const _row = this.spanArr1[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }

//获取合并数据
        let contactDot = 0
        let contactDot1 = 0
        this.tableData.forEach((item, index) => {
          item.index = index
          if (index === 0) {
            this.spanArr.push(1)
            this.spanArr1.push(1)
          } else {
            if (item.use === this.tableData[index - 1].use) {
// 如果第一行的数据等于他后面那一行的数据 数组+1 后面push个0
              this.spanArr[contactDot] += 1
              this.spanArr.push(0)
            } else {
//否则不合并
              this.spanArr.push(1)
              contactDot = index
            }
            if (item.type === this.tableData[index - 1].type) {
              this.spanArr1[contactDot1] += 1
              this.spanArr1.push(0)
            } else {
              this.spanArr1.push(1)
              contactDot1 = index
            }
          }
        })