vxe-table中vxe-grid中的合并單元格方式(合并行、列)
更新時間:2025年04月24日 16:29:52 作者:大個個個個個兒
這篇文章主要介紹了vxe-table中vxe-grid中的合并單元格方式(合并行、列),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vxe-table中vxe-grid的合并單元格(合并行、列)
效果圖(我所用到的是合并行)
根據(jù)personName人員名稱相同合并行
實例代碼
<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: '開始時間', field: 'startTime' }, { title: '結(jié)束時間', 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é)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue中el-date-picker?type=daterange日期不回顯的問題
這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10Vue3.0之引入Element-plus ui樣式的兩種方法
本文主要介紹了Vue3.0之引入Element-plus ui樣式的兩種方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02Vue中使用iframe踩坑問題記錄 iframe+postMessage
這篇文章主要介紹了Vue中使用iframe踩坑問題記錄 iframe+postMessage,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09