vxe-table 分页 + 设置行颜色+合并列（vxe-grid）

1、效果图

2、代码

//html代码
  

//js 部分
 data() {
    return {
      loading: false,
      // 分页
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
//自己定义的表头
  tableColumn: [],
//后端请求到的数据
tableData:[]
 }
},
methods: {
loadData(){
 let that = this
let params = {}
      that.loadding = true
     //查询条件
      params.pageNo = that.tablePage.currentPage
      params.pageSize = that.tablePage.pageSize
//下面调用你自己请求的方法，把params 传过去
拿到值之后把that.tablePage.total = 后端传给你的总页数
},
//点击分页赋值查询
 handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.loadData()
    },
//设置行颜色 row是行信息
 rowStyle({ row, rowIndex }) {
      if (row.payProcess == '不批') {
        return {
          color: 'red',
          textDecoration: 'line-through'
        }
      }
    },
// 合并列
    rowspanMethod({ row, $rowIndex, column, data }) {
//estTime,cntrno是你定义的columns   如：{
  //        title: '报价时间',
    //      align: 'center',
        //  field: 'estTime'
      //  },
      let fields = ['estTime', 'cntrno']
      let cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        let prevRow = data[$rowIndex - 1]
        let nextRow = data[$rowIndex + 1]
        if (prevRow && prevRow[column.property] == cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] == cellValue) {
            nextRow = data[++countRowspan + $rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
}

备注：为了自己写项目方便，随便写了一个简单的vxe-table(有vxe-table不懂得，可以联系)