【antd + vue】表格行合并,同时使用插槽
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
一、需求说明
表格中,如果一个学校有多个考试科目,则分行展示,其余列,则合并为一行展示,如图所示
二、需求分析
1、表格行合并
相当于有4行,其中1、2行是同一个学校包含不同考试科目及对应人次的数据,所以除“考试科目、科目人次”列外,其余列数据相同,需要合并成一行;其中3、4行,同理;
ps:即上图所示,分行展示的同一个学校中,“考试科目、科目人次”列如果有多个科目,则分行展示。
2、单元格内容自定义
“序号”列:根据合并行后的序号计算;
“完善性检查”列:需要根据返回结果来判断,单元格的内容及样式;
“操作”列:需要自定义单元格内容;
三、解决办法
1、html 代码
<a-table
:rowKey="(record, index) => index"
:columns="dataList.columns"
:dataSource="dataList.dataSource"
:loading="dataList.loading"
:pagination="false"
bordered
>
<!-- “序号”列 -->
<template v-slot:num="slotProps">
{{
(queryParm.pageIndex - 1) * queryParm.pageSize +
dataList.mergeList.slice(0, slotProps.index).filter(res => {
return res !== 0;
}).length +
1
}}
</template>
<!-- “完备性检测”列 -->
<template #state="{ record }">
<span v-if="record.state === '2'" class="safe-level-1">考生照异常</span>
<span v-else-if="record.state === '1'" class="safe-level-2">正常</span>
<span v-else class="safe-level-1">考生照片不全</span>
</template>
<!-- “操作”列 -->
<template #action="{ record }">
<div class="inline look" @click.stop="getDetails(record)">
<svg-icon icon-class="details" class="icon look"></svg-icon>
<span class="note">详情</span>
</div>
</template>
</a-table>
2、数据 格式
const queryParm= reactive({
pageIndex: 1,
pageSize: 10
});
const dataList= reactive({
dataSource: [],
columns: [
{
title: "序号",
dataIndex: "num",
key: "num",
align: "center",
width: 100,
slots: { customRender: "num" },
customCell: (record, rowIndex) => {
return {
style: {
display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined
},
rowSpan: dataList.mergeList[rowIndex]
};
}
},
{
title: "学校名称",
dataIndex: "schoolName",
key: "schoolName",
ellipsis: true,
customCell: (record, rowIndex) => {
return {
style: {
display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined
},
rowSpan: dataList.mergeList[rowIndex]
};
}
},
{
title: "所属区县",
dataIndex: "cityName",
key: "cityName",
ellipsis: true,
customCell: (record, rowIndex) => {
return {
style: {
display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined
},
rowSpan: dataList.mergeList[rowIndex]
};
}
},
{
title: "报名人数",
dataIndex: "stuNum",
key: "stuNum",
ellipsis: true,
customCell: (record, rowIndex) => {
return {
style: {
display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined
},
rowSpan: dataList.mergeList[rowIndex]
};
}
},
{
title: "涉及考点",
dataIndex: "siteName",
key: "siteName",
ellipsis: true,
customCell: (record, rowIndex) => {
return {
style: {
display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined
},
rowSpan: dataList.mergeList[rowIndex]
};
}
},
{
title: "考试科目",
dataIndex: "subjectName",
key: "subjectName",
ellipsis: true
},
{
title: "科目人次",
dataIndex: "numberOfSubject",
key: "numberOfSubject",
ellipsis: true
},
{
title: "上传时间",
dataIndex: "createTime",
key: "createTime",
ellipsis: true,
customCell: (record, rowIndex) => {
return {
style: {
display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined
},
rowSpan: dataList.mergeList[rowIndex]
};
}
},
{
title: "完备性检测",
dataIndex: "state",
key: "state",
ellipsis: true,
slots: { customRender: "state" },
customCell: (record, rowIndex) => {
return {
style: {
display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined
},
rowSpan: dataList.mergeList[rowIndex]
};
}
},
{
title: "操作",
dataIndex: "action",
key: "action",
width: 100,
slots: { customRender: "action" },
customCell: (record, rowIndex) => {
return {
style: {
display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined
},
rowSpan: dataList.mergeList[rowIndex]
};
}
}
],
total: 0,
loading: false,
mergeList: []
}
});
注意事项
PS:
1、使用 customCell 属性合并行,则不会影响插槽及 customRender 属性的使用;
2、customCell 单元格合并后,需要对被合并行进行样式上的隐藏处理,如下所示:
如果没有在样式上隐藏被合并行,则被合并行会被挤到该行列尾,如下图:
3、rowSpan 属性 支持行合并:
值为 0 时,该单元格不会渲染(即,被合并);
值为 1 时,该单元格正常显示(即,1行);
值为 2 时,该单元格与下一行一起合并展示(即,原2行,现1行展示);
值为 3 时,该单元格与下两个行一起合并展示(即,原3行,现1行展示);
以此类推
3、合并行计算
数据处理代码如下:
/**
* @description 获取合并单元格rowSpan集合
* @param {Array} dataScroce 数据源
* @param {String} filed 需要合并的字段
* @returns {Array} 该字段下单元格rowSpan集合
*/
const getRowspan = (dataScroce, filed) => {
let spanArr = [];
let position = 0;
dataScroce.forEach((item, index) => {
if (index === 0) {
spanArr.push(1);
position = 0;
} else {
//需要合并的地方判断
if (dataScroce[index][filed] === dataScroce[index - 1][filed]) {
spanArr[position] += 1;
spanArr.push(0);
} else {
spanArr.push(1);
position = index;
}
}
});
return spanArr;
};
得到每行是否需要合并的结果:
dataList.mergeList = getRowspan(dataList.dataSource, "schoolName");
四、参考链接
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)