JeecgBoot BasicTable合并行操作,官方文檔信息太少了
實現(xiàn)效果

列表數(shù)據(jù)(BasicColumn)
// 列表數(shù)據(jù)
export const columns: BasicColumn[] = [
{
title: '階段',
align: 'center',
dataIndex: 'projectStage',
},
{
title: '類別',
align: 'center',
dataIndex: 'emissionsType',
},
....
]
js文件定義表格單元格合并公共方法---單獨建個hook-------jsfile.fun.js
// 表格合并 export const getSpanArr = (tableData, itemProperty) => { if (tableData.length === 0) { return false; } const spanArr = []; let pos; for (let i = 0; i < tableData.length; i++) { if (i === 0) { spanArr.push(1); pos = 0; } else { // 判斷當(dāng)前元素與上一個元素是否相同 相同則加 1。。。這里可以根據(jù)實際需求調(diào)整。可能多列相等時才合并 if (tableData[i][itemProperty] && tableData[i][itemProperty] === tableData[i - 1][itemProperty]) { spanArr[pos] += 1; spanArr.push(0); } else { spanArr.push(1); pos = i; } } } return spanArr; };
組件界面引入
import { ref, computed } from 'vue';
import { getSpanArr } from './jsfile.fun.js';
import { columns } from './jsfile.data.js';
// 表格列設(shè)置單元格合并
const newColumns = computed(() => {
// 獲取表格數(shù)據(jù)
const tableDataSource = getDataSource();
// 設(shè)置需要合并的列
const needTomergeColumnsIndex = ['projectStage', 'emissionsType'];
let newColumnsData = columns.map((item) => {
if (needTomergeColumnsIndex.includes(item.dataIndex)) {
// 計算合并單元格數(shù)量
const spanArr = getSpanArr(tableDataSource, item.dataIndex);
item.customCell = (record, rowIndex, column) => {
// 設(shè)置單元格合并數(shù)量
return { rowSpan: spanArr[rowIndex] };
};
}
return item;
});
return newColumnsData;
});
如何使用:
//注冊table數(shù)據(jù)
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '工單工序轉(zhuǎn)移_工單工序',
api: list,
columns: newColumns, //---換成新的colums即可
canResize:false,
useSearchForm: false,
actionColumn: {
width: 120,
fixed: 'right',
},
beforeFetch: async (params) => {
let rangerQuery = await setRangeQuery();
return Object.assign(params, rangerQuery);
},
},
exportConfig: {
name: "工單工序轉(zhuǎn)移_工單工序",
url: getExportUrl,
params: queryParam,
},
importConfig: {
url: getImportUrl,
success: handleSuccess
},
});
純Ant Design VUE 看下一篇
浙公網(wǎng)安備 33010602011771號