elementui表格复杂操作

发布时间 2023-10-13 09:26:42作者: 本兮嘻嘻

1.elementui表格最后一行加粗显示

表格table加以下属性

:cell-style="cellStyleModify"

methods方法实现:

    cellStyleModify({row,column,rowIndex,columnIndex}){
      let fontStyle = null;
      if( row.ggmc.includes('合计')){
        fontStyle = 'font-weight:700';
        return fontStyle;
      }else{
        fontStyle = 'text-align:center';
        return fontStyle;
      }
    },

2.elementui表格数据动态跨行合并

1.查询出表格数据后执行下面方法,为表格行合并数据做准备

    // 为表格行合并准备数据
    getRowList() {
      this.rowList = []
      this.rowListpos = 0
      let data = this.configData
      data.forEach((item, index, arr) => {
        // 表格第一行必须保留
        if (index === 0) {
          this.rowList.push(1)
          this.rowListpos = 0
        } else {
          // 判断指标类别当前行与指标类别上一行是否相同 如果相同则合并
          if (item.zblb === arr[index - 1].zblb) {
            this.rowList[this.rowListpos] += 1 //需要合并的行数累加1
            this.rowList.push(0)
          } else {
            this.rowList.push(1)
            this.rowListpos = index
          }
        }
      })
    },

2.在表格table加上如下属性

:span-method="objectSpanMethod"

methods方法实现

    //跨行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (this.rowList[rowIndex]) {
          let rowNum = this.rowList[rowIndex]
          return {
            rowspan: rowNum,
            colspan: rowNum > 0 ? 1 : 0
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },