当前位置：首页 > news >正文

vue3使用Ant-Design组件a-table表格实现多层表头及合并单元格

news 来源：原创 2024/9/20 18:33:39

vue3使用Ant-Design组件a-table表格实现多层表头及合并单元格

效果图：
在这里插入图片描述
多层表头： 通过columns中的children来设置多个值实现多层表头；

表身单元格合并： 从图中可以看出第一列（班次）和最后一列（值班员签名）需要表格行合并单元格（通过表格的某个字段中相同值进行合并）；

整体代码如下：

<template><div class="tableContent"><a-table :columns="columns" :data-source="dataSource" bordered size="small" :pagination="false":scroll="{ y: 640 }"></a-table></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const columns = [{title: '班次',dataIndex: 'tableTime',key: 'tableTime',width: 50,align: 'center',customCell: ({ rowSpan }) => {return {rowSpan: rowSpan}}},{title: '时间',dataIndex: 'time',key: 'time',width: 100,align: 'center'},{title: '直供井',children: [{title: 'PH',dataIndex: 'PH1',key: 'PH1',width: 80,align: 'center'},{title: '浊度（NTU）',dataIndex: 'turbidity1',key: 'turbidity1',width: 80,align: 'center'},{title: '电导率(μs/cm)',dataIndex: 'conductivity1',key: 'conductivity1',width: 80,align: 'center'},{title: '温度（°C）',dataIndex: 'temperature1',key: 'temperature1',width: 80,align: 'center'},{title: '余氯（mg/L）',dataIndex: 'residual1',key: 'residual1',width: 80,align: 'center'},],},{title: '出厂水',children: [{title: 'PH',dataIndex: 'PH2',key: 'PH2',width: 80,align: 'center'},{title: '浊度（NTU）',dataIndex: 'turbidity2',key: 'turbidity2',width: 80,align: 'center'},{title: '电导率(μs/cm)',dataIndex: 'conductivity2',key: 'conductivity2',width: 80,align: 'center'},{title: '温度（°C）',dataIndex: 'temperature2',key: 'temperature2',width: 80,align: 'center'},{title: '余氯（mg/L）',dataIndex: 'residual2',key: 'residual2',width: 80,align: 'center'},],},{title: '管网末梢水',children: [{title: 'PH',dataIndex: 'PH3',key: 'PH3',width: 80,align: 'center'},{title: '浊度（NTU）',dataIndex: 'turbidity3',key: 'turbidity3',width: 80,align: 'center'},{title: '电导率(μs/cm)',dataIndex: 'conductivity3',key: 'conductivity3',width: 80,align: 'center'},{title: '温度（°C）',dataIndex: 'temperature3',key: 'temperature3',width: 80,align: 'center'},{title: '余氯（mg/L）',dataIndex: 'residual3',key: 'residual3',width: 80,align: 'center'},],},{title: '值班员签名',dataIndex: 'signature',key: 'signature',width: 100,align: 'center',customCell: ({ rowSpan }) => {return {rowSpan: rowSpan}}},
];
const dataSource = ref([{ tableTime: '早班', time: 1, PH1: 7.61, turbidity1: 0.32, conductivity1: 671.61, temperature1: 23.73, residual1: 0.02, PH2: 7.61, turbidity2: 0.32, conductivity2: 671.61, temperature2: 23.73, residual2: 0.02, PH3: 7.61, turbidity3: 0.32, conductivity3: 671.61, temperature3: 23.73, residual3: 0.02, signature: '张三' },{ tableTime: '早班', time: 2, PH1: 7.61, turbidity1: 0.32, conductivity1: 671.61, temperature1: 23.73, residual1: 0.02, PH2: 7.61, turbidity2: 0.32, conductivity2: 671.61, temperature2: 23.73, residual2: 0.02, PH3: 7.61, turbidity3: 0.32, conductivity3: 671.61, temperature3: 23.73, residual3: 0.02, signature: '张三' },{ tableTime: '中班', time: 9, PH1: 7.61, turbidity1: 0.32, conductivity1: 671.61, temperature1: 23.73, residual1: 0.02, PH2: 7.61, turbidity2: 0.32, conductivity2: 671.61, temperature2: 23.73, residual2: 0.02, PH3: 7.61, turbidity3: 0.32, conductivity3: 671.61, temperature3: 23.73, residual3: 0.02, signature: '李四' },{ tableTime: '中班', time: 10, PH1: 7.61, turbidity1: 0.32, conductivity1: 671.61, temperature1: 23.73, residual1: 0.02, PH2: 7.61, turbidity2: 0.32, conductivity2: 671.61, temperature2: 23.73, residual2: 0.02, PH3: 7.61, turbidity3: 0.32, conductivity3: 671.61, temperature3: 23.73, residual3: 0.02, signature: '李四' },{ tableTime: '中班', time: 11, PH1: 7.61, turbidity1: 0.32, conductivity1: 671.61, temperature1: 23.73, residual1: 0.02, PH2: 7.61, turbidity2: 0.32, conductivity2: 671.61, temperature2: 23.73, residual2: 0.02, PH3: 7.61, turbidity3: 0.32, conductivity3: 671.61, temperature3: 23.73, residual3: 0.02, signature: '李四' },{ tableTime: '晚班', time: 17, PH1: 7.61, turbidity1: 0.32, conductivity1: 671.61, temperature1: 23.73, residual1: 0.02, PH2: 7.61, turbidity2: 0.32, conductivity2: 671.61, temperature2: 23.73, residual2: 0.02, PH3: 7.61, turbidity3: 0.32, conductivity3: 671.61, temperature3: 23.73, residual3: 0.02, signature: '王五' },{ tableTime: '晚班', time: 18, PH1: 7.61, turbidity1: 0.32, conductivity1: 671.61, temperature1: 23.73, residual1: 0.02, PH2: 7.61, turbidity2: 0.32, conductivity2: 671.61, temperature2: 23.73, residual2: 0.02, PH3: 7.61, turbidity3: 0.32, conductivity3: 671.61, temperature3: 23.73, residual3: 0.02, signature: '王五' },
])//合并单元格方法
function groupData(data) {let currentTableTime = '';let currentSignature = '';return data.map((item, index) => {if (currentTableTime !== item.tableTime || currentSignature !== item.signature) {currentTableTime = item.tableTime;currentSignature = item.signature;let rowSpan = 0;for (let i = 0; i < data.length; i++) {if (i >= index) {const currentItem = data[i];if (currentTableTime === currentItem.tableTime && currentSignature === currentItem.signature) {rowSpan += 1;} else {break;}}}item.rowSpan = rowSpan;} else {item.rowSpan = 0;}return item;});
}
groupData(dataSource.value)
</script>
<style lang="less" scoped></style>