当前位置：首页 > news >正文

vue a-table自定义表头颜色+合并表格

news 来源：原创 2025/6/28 10:42:20

在这里插入图片描述

vue a-table自定义表头颜色，以及自定义表头文字换行

又有让我掉头发的需求，看着很容易，但是也搞了好久，累了

<template><div><div v-for="(item1, index1) in totalArr" :key="index1 + 'A'" class="content-container" style="margin-top: 20px">{{ `${item1.name}` }}<div class="table-wrap"><a-tablesize="small"class="sum-table"borderedrowKey="id":columns="getColumns(item1.name)":pagination="false":dataSource="item1.data"/></div></div></template> <script>const g_sup_1 = {backgroundColor: '#e1edfe',fontWeight: 'bold',
}
const g_sup_2 = {backgroundColor: '#ffedc1',fontWeight: 'bold',
}
const g_sup_3 = {backgroundColor: '#fed3b7',fontWeight: 'bold',
}
const g_sup_4 = {backgroundColor: '#fcc19a',fontWeight: 'bold',
}
const g_sup_5 = {backgroundColor: '#e1edfe',fontWeight: 'bold',
}
export default {
data() {return {rowMap: {},totalArr: [],tableRowMaps: {},}}methods: {numberFormatByRegVal(val) {return val; // 这个是把金额转成千分位的，但是我懒得写了先这样},getColumns(tableName) {return [{type: 'seq',title: '序号',width: 50,align: 'center',customHeaderCell: () => ({style: {...g_sup_1,},}),customRender: (text, record, index) => {if (index !== 0) {return `${index}`}},},{title: '工程承包合同基本信息',align: 'center',customHeaderCell: () => ({style: {...g_sup_1,  // 这是写表头背景颜色的代码},}),children: [{title: () => (<div class="title-center"><span>{tableName}子项目</span>   // 这是自定义表头，可以随便自己写样式<div>(点击看详情) </div></div>),align: 'center',width: 110,align: 'left',dataIndex: 'projectName',customHeaderCell: () => ({style: {...g_sup_1,},}),customRender: (value, row, index) => {// 获取当前表格的rowMap  --- 这个是根据相同projectName 合并表格的const rowMap = this.tableRowMaps[tableName] || {}const { projectName } = rowif (rowMap[projectName] && rowMap[projectName].index === index) {return {children:index !== 0 ? (<span class="c-blue h-point" onclick={() => this.goToContractDetail(row)}>{value}</span>) : ('总合计'),attrs: {rowspan: rowMap[projectName].count,},}} else {return {children: null,attrs: {colSpan: 0,},}}},// scopedSlots: { customRender: 'projectName' },},{title: '承包合同',align: 'center',width: 150,align: 'left',dataIndex: 'contName',customHeaderCell: () => ({style: {...g_sup_1,},}),},{title: () => (<div class="title-center"><span>签订时间</span></div>),dataIndex: 'dsigndate',key: 'dsigndate',align: 'right',width: 78,customHeaderCell: () => ({style: {...g_sup_1,},}),customRender: (value, row, index) => {const obj = {children: <span>{value}</span>,attrs: {},}return obj},},],},{title: '承包合同执行情况(万元)',align: 'center',customHeaderCell: () => ({style: {...g_sup_2,},}),children: [{title: () => (<div class="title-center"><span>合同总金额</span></div>),dataIndex: 'contAmt',key: 'contAmt',align: 'right',width: 80,customHeaderCell: () => ({style: {...g_sup_2,},}),customRender: (value, row, index) => {const obj = {children: <span>{this.numberFormatByRegVal(row.contAmt)}</span>,attrs: {},}return obj},},{title: () => (<div class="title-center"><span>主合同</span></div>),width: 80,dataIndex: 'contMainamt',key: 'contMainamt',align: 'right',customHeaderCell: () => ({style: {...g_sup_2,},}),customRender: (value, row, index) => {const obj = {children: <span>{this.numberFormatByRegVal(value)}</span>,attrs: {},}return obj},},{title: () => (<div class="title-center"><span>补充协议</span></div>),width: 80,dataIndex: 'contBcamt',key: 'contBcamt',align: 'right',customHeaderCell: () => ({style: {...g_sup_2,},}),customRender: (value, row, index) => {const obj = {children: <span>{this.numberFormatByRegVal(value) || 0}</span>,attrs: {},}return obj},},{title: () => (<div class="title-center"><span>设计变更</span></div>),width: 80,dataIndex: 'contBgamt',key: 'contBgamt',align: 'right',customHeaderCell: () => ({style: {...g_sup_2,},}),customRender: (value, row, index) => {const obj = {children: <span>{this.numberFormatByRegVal(value)}</span>,attrs: {},}return obj},},{title: () => (<div class="title-center"><span>现场签证</span></div>),width: 80,dataIndex: 'contQzamt',key: 'contQzamt',align: 'right',customHeaderCell: () => ({style: {...g_sup_2,},}),customRender: (value, row, index) => {const obj = {children: <span>{this.numberFormatByRegVal(value)}</span>,attrs: {},}return obj},},],},{title: '产值与成本',align: 'center',customHeaderCell: () => ({style: {...g_sup_3,},}),children: [{title: () => (<div class="title-center"><span>对甲产值</span></div>),dataIndex: 'djczAmt',key: 'djczAmt',align: 'right',width: 80,customHeaderCell: () => ({style: {...g_sup_3,},}),customRender: (value, row, index) => {const obj = {children: <span>{this.numberFormatByRegVal(value) || 0}</span>,attrs: {},}return obj},},{title: () => (<div class="title-center"><span>成本</span></div>),dataIndex: 'sjcbAmt',key: 'sjcbAmt',align: 'right',width: 80,customHeaderCell: () => ({style: {...g_sup_3,},}),customRender: (value, row, index) => {// 获取当前表格的rowMapconst rowMap = this.tableRowMaps[tableName] || {}const { projectName } = rowif (rowMap[projectName] && rowMap[projectName].index === index) {return {children: <span>{this.numberFormatByRegVal(value) || 0}</span>,attrs: {rowspan: rowMap[projectName].count,},}} else {return {children: null,attrs: {colSpan: 0,},}}},},{title: () => (<div class="title-center"><span>差额</span></div>),dataIndex: 'lrAmt',key: 'lrAmt',align: 'right',width: 70,customHeaderCell: () => ({style: {...g_sup_3,},}),customRender: (value, row, index) => {const { projectName } = rowconst rowMap = this.tableRowMaps[tableName] || {}if (rowMap[projectName] && rowMap[projectName].index === index) {return {children: (<span class={value >= 0 ? 'c-green' : 'c-red'}>{this.numberFormatByRegVal(value) || 0}</span>),attrs: {rowspan: rowMap[projectName].count,},}} else {return {children: null,attrs: {colSpan: 0,},}}},},],},{dataIndex: 'vrealcontno3',title: '收入(万元)',width: 75,align: 'center',customHeaderCell: () => ({style: {...g_sup_4,},}),children: [{dataIndex: 'yings',title: '累计应收',width: 75,align: 'right',customHeaderCell: () => ({style: {...g_sup_4,},}),customRender: (value, row, index) => {const obj = {children: <span>{this.numberFormatByRegVal(row.yings)}</span>,attrs: {},}return obj},},{dataIndex: 'yis',title: '累计已收',width: 75,align: 'right',customHeaderCell: () => ({style: {...g_sup_4,},}),customRender: (value, row, index) => {const obj = {children: <span>{this.numberFormatByRegVal(row.yis)}</span>,attrs: {},}return obj},},{dataIndex: 'dais',title: '累计欠收',width: 75,align: 'right',customHeaderCell: () => ({style: {...g_sup_4,},}),customRender: (value, row, index) => {const obj = {children: <span>{this.numberFormatByRegVal(value)}</span>,attrs: {},}return obj},},],},]},// 接口给你返回数据的时候，要处理一下async getInfo(params) {try {const res = await geLossAnalysisList(params)const { result, success, message } = resif (!success) {this.$message.error(message || '获取数据失败')return}//拿到数据 要先把数据根据projectName 相同的排序在一块const tempData = result.map((e1) => {const data = e1.data.sort((a, b) => {if (a.projectName < b.projectName) {return -1}if (a.projectName > b.projectName) {return 1}return 0})return {...e1,data,}})this.tableRowMaps = {}this.tableRowMapsOut = {}tempData.forEach((table) => {const rowMap = {}const rowMapOut = {}// 处理表格数据，计算合并信息table.data.forEach((item, index) => {const projectName = item.projectNameif (item.isSummary) return // 跳过合计行if (!rowMap[projectName]) {// 首次遇到此项目，记录起始位置rowMap[projectName] = {index: index,count: 1,}} else {// 增加此项目的计数rowMap[projectName].count += 1}})table.queryTaractData.forEach((item, index) => {const projectName = item.projectNameif (item.isSummary) return // 跳过合计行if (!rowMapOut[projectName]) {// 首次遇到此项目，记录起始位置rowMapOut[projectName] = {index: index,count: 1,}} else {// 增加此项目的计数rowMapOut[projectName].count += 1}})this.tableRowMapsOut[table.name] = rowMapOutthis.tableRowMaps[table.name] = rowMap})// 深度拷贝确保响应性this.totalArr = JSON.parse(JSON.stringify(tempData || []))  // 这个是最后处理好的数据}
}</script>

以上就是全部啦，
知识点：1、子项目名称可以根据父项目动态改可搜{tableName}子项目
2、自定义修改表头背景颜色，可搜customHeaderCell
3、自定义修改表头文字颜色，比如想换行或者其他，可搜 title: () => (
4、自定义合并表格 ,可搜 getInfo数据处理+ if (rowMap[projectName] && rowMap[projectName].index === index) {渲染处理

数据大概是这样的，懒的写直接截图
在这里插入图片描述