Vue3+ElementPlus实现Table表格的行合并(单个及多个)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
实现结果
<el-table
border
v-loading="state.loading"
:data="state.tableDataList"
:height="pagTabHeight"
row-key="id"
ref="tableRef"
:highlight-current-row="true"
@row-click="rowClick"
:span-method="objectSpanMethod"
>
<el-table-column type="index" label="序号" align="center" />
<el-table-column
prop="level"
label="参数级别"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="year"
label="年度"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="type"
label="评价类型"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="way"
label="定额方式"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="creator"
label="创建人"
show-overflow-tooltip
align="center"
/>
<el-table-column label="创建时间" show-overflow-tooltip align="center">
<template #default="{ row }">{{
dateFormat(row.createTime, 'yyyy-MM-dd')
}}</template>
</el-table-column>
</el-table>
实现方法
interface ObjInterface {
[key: string]: any; // 字段扩展声明
}
/**
* @description 合并表格行
* @export
* @param {object[]} data 表格数据
* @param {string} rowName 合并行的name
* @param {string} otherRowName 合并其他行
* @return {*}
*/
export function tableRowMerge(
data: ObjInterface[],
rowName: string,
otherRowName?: string
) {
const idArray = [] as number[];
let idPos = 0;
for (let i = 0; i < data.length; i++) {
// 如果当 i == 0 说明数据是第一行, 需要重新赋值
if (i == 0) {
// idArray.push(1) 说明这一行数据被显示出来
idArray.push(1);
// idPos = 0 重置当前的计数器
idPos = 0;
}
// 说明不是从第一行开始遍历的
else {
if (otherRowName) {
//主行之外的 另一行合并
if (
data[i][rowName] == data[i - 1][rowName] &&
data[i][otherRowName] == data[i - 1][otherRowName]
) {
// 如果相同就需要将 idArray 的数据自加
idArray[idPos] += 1;
// 同时需要将 idArray push一个0 表示下一行不用显示
idArray.push(0);
}
// 说明 当前的数据和上一行的指定数据不同
else {
// idArray.push(1) 说明当前一行的数据需要显示
idArray.push(1);
// 重新给计数器赋值
idPos = i;
}
} else {
// 判断当前的指定数据是否和之前的指定数据值相同
if (data[i][rowName] == data[i - 1][rowName]) {
// 如果相同就需要将 idArray 的数据自加
idArray[idPos] += 1;
// 同时需要将 idArray push一个0 表示下一行不用显示
idArray.push(0);
}
// 说明 当前的数据和上一行的指定数据不同
else {
// idArray.push(1) 说明当前一行的数据需要显示
idArray.push(1);
// 重新给计数器赋值
idPos = i;
}
}
}
}
return idArray;
}
调用方法
let rowMergeArr = [] as number[];
let rowMergeArr1 = [] as number[];
/**
* @description 合并行
*/
interface SpanMethodProps {
row: PriceTableItem;
column: TableColumnCtx<PriceTableItem>;
rowIndex: number;
columnIndex: number;
}
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex
}: SpanMethodProps) => {
// level列
if (columnIndex === 1) {
// rowMergeArr[rowIndex] 取出当前存放行的合并状态
const rowSpan = rowMergeArr[rowIndex];
// 判断当前的 列是否需要显示
const colSpan = rowSpan > 0 ? 1 : 0;
return {
rowspan: rowSpan,
colspan: colSpan
};
}
// level列之后的 type列
if (columnIndex === 3) {
// rowMergeArr[rowIndex] 取出当前存放行的合并状态
const rowSpan = rowMergeArr1[rowIndex];
// 判断当前的 列是否需要显示
const colSpan = rowSpan > 0 ? 1 : 0;
return {
rowspan: rowSpan,
colspan: colSpan
};
}
// ...如果还有继续
};
onMounted(() => {
rowMergeArr = tableRowMerge(state.tableDataList, 'level');// 主列的行合并
rowMergeArr1 = tableRowMerge(state.tableDataList, 'level', 'type');// 其他列的行合并
});
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)