vxe-table中vxe-grid中的合并單元格方式(合并行、列)
更新時(shí)間:2025年04月24日 16:29:52 作者:大個(gè)個(gè)個(gè)個(gè)個(gè)兒
這篇文章主要介紹了vxe-table中vxe-grid中的合并單元格方式(合并行、列),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vxe-table中vxe-grid的合并單元格(合并行、列)
效果圖(我所用到的是合并行)
根據(jù)personName人員名稱相同合并行

實(shí)例代碼
<vxe-grid v-bind="gridOptions" ref="tableRefs"></vxe-grid>
// 列表表格數(shù)據(jù)
const gridOptions = ref({
data: [],
align: 'center',
loading: false,
border: true,
height: '300px',
columns: [
{ type: 'seq', width: 50 },
{
title: '人員名稱',
field: 'personName'
},
{
title: '人員類型',
field: 'typeName'
},
{
title: '代墊公司',
field: 'proxyOrgName'
},
{
title: '開始時(shí)間',
field: 'startTime'
},
{
title: '結(jié)束時(shí)間',
field: 'endTime'
}
]
});
const getPage = async () => {
gridOptions.value.loading = true;
const res = await PersonnelTypeManagementApi.personHistory({
pageNo: customMade.value.pageNo,
pageSize: customMade.value.pageSize,
orgId: rightOrgId.value,
personId: props.rowData.personId
});
gridOptions.value.loading = false;
gridOptions.value.data = res.data.rows;
nextTick(() => { //必須在nextTick中請求,否則表格不會重新渲染
updateMergeCells(res.data.rows);
});
customMade.value.total = res.data.totalRows;
};
// 合并規(guī)則
const updateMergeCells = tableData => {
const merges = [];
let prevPersonName = null;
let count = 0;
for (let rowIndex = 0; rowIndex < tableData.length; rowIndex++) {
const currentRow = tableData[rowIndex];
if (prevPersonName === currentRow.personName) {
count++;
} else {
if (count > 0) {
// 注意這里 row 是從 rowIndex - count 開始的
merges.push({ row: rowIndex - count - 1, col: 1, rowspan: count + 1, colspan: 1 });
}
prevPersonName = currentRow.personName;
count = 0;
}
}
// 處理最后一組相同的 personName
if (count > 0) {
merges.push({ row: tableData.length - count - 1, col: 1, rowspan: count + 1, colspan: 1 });
}
if (tableRefs.value) {
tableRefs.value.setMergeCells(merges);//設(shè)置合并
}
};總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue addRoutes路由動(dòng)態(tài)加載操作
這篇文章主要介紹了vue addRoutes路由動(dòng)態(tài)加載操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue基于websocket實(shí)現(xiàn)智能聊天及吸附動(dòng)畫效果
這篇文章主要介紹了vue基于websocket實(shí)現(xiàn)智能聊天及吸附動(dòng)畫效果,主要功能是基于websocket實(shí)現(xiàn)聊天功能,封裝了一個(gè)socket.js文件,使用Jwchat插件實(shí)現(xiàn)類似QQ、微信電腦端的功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件
這篇文章主要介紹了基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
詳解關(guān)于Vue2.0路由開啟keep-alive時(shí)需要注意的地方
這篇文章主要介紹了關(guān)于Vue2.0路由開啟keep-alive時(shí)需要注意的地方,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09

