1、效果图
2、代码
//html代码
<vxe-grid
border
resizable
height="530"
:loading="loading"
:seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
:pager-config="tablePage"
//设置行颜色判断
:row-style="rowStyle"
//合并列
:span-method="rowspanMethod"
:columns="tableColumn"
:data="tableData"
@page-change="handlePageChange"></vxe-grid>
//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不懂得,可以联系)