<template> <table class="data-table"> <!-- 表头行 --> <tr> <th class="
label">项目</th> <th v-for="(header, index) in headers" :
key="index">{{ header }}</th> </tr> <!-- 普通数据行 --> <tr v-for="(row, rowIndex) in normalRows" :
key="rowIndex"> <td class="
label">{{ row.
label }}</td> <td v-for="(col, colIndex) in row.columns" :
key="colIndex"> {{ col.
value }} </td> </tr> <!-- "便"行特殊处理 - 拆分成三行 --> <tr v-for="(subRow, subRowIndex) in 3" :
key="`special-${subRowIndex}`"> <!-- 第一列标签（只显示在第一行） --> <td v-if="subRowIndex === 0" class="
label" :rowspan="3">便</td> <!-- 数据单元格 --> <td v-for="(col, colIndex) in specialRow.columns" :
key="`col-${colIndex}`" class="special-cell" > <!-- 使用单行单列网格确保边框对齐 --> <div class="cell-content"> {{ col.
values[subRowIndex] }} </div> </td> </tr> </table> </template> <script setup> import { ref, reactive } from 'vue'; // 表头数据 const headers = ref(['周一', '周二', '周三', '周四', '周五']); // 普通行数据 const normalRows = reactive([ {
label: '日期', columns: Array(5).fill({
value: '1998-10-30' }) }, {
label: '天气', columns: Array(5).fill({
value: '晴' }) }, {
label: '气温', columns: Array(5).fill({
value: '38℃' }) } ]); // 特殊行数据 const specialRow = reactive({
label: '便', columns: Array(5).fill({
values: ['1', '2', '3'] // 每个单元格包含3个子值 }) }); // 动态更新示例 setTimeout(() => { // 更新日期行的第二列 normalRows[0].columns[1].
value = '2023-07-21'; // 更新便行第三列的值 specialRow.columns[2].
values = ['4', '5', '6']; }, 2000); </script> <style scoped> /* 基础表格样式 - 确保边框完美对齐 */ .data-table { width: 100%; border-collapse: collapse; /* 关键：合并边框 */ border-spacing: 0; margin: 20px 0; font-family: Arial, sans-serif; table-layout: fixed; /* 固定布局确保列宽一致 */ } .data-table th, .data-table td { padding: 0; /* 移除内边距，由内部元素控制 */ text-align: center; border: 1px solid #ccc; /* 统一边框样式 */ position: relative; height: 40px; /* 固定行高 */ vertical-align: middle; /* 内容垂直居中 */ } .data-table th { background-color: #f0f0f0; font-weight: bold; padding: 12px 15px; /* 表头保留内边距 */ } .
label { background-color: #f5f5f5; width: 15%; font-weight: bold; padding: 12px 15px; /* 标签列保留内边距 */ } /* 特殊单元格样式 */ .special-cell { padding: 0 !important; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } /* 单元格内容容器 */ .cell-content { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 10px 0; /* 内部垂直间距 */ box-sizing: border-box; } /* 特殊行的边框处理 */ .data-table tr:last-child td { border-bottom: 1px solid #ccc !important; } /* 确保特殊单元格的边框完美对齐 */ .special-cell:first-child { border-left: none; } .special-cell:last-child { border-right: none; } </style>
便那行改成竖着三行
本文介绍了后端如何将信息打包成key-value对发送给前端，以及前端通过JavaScript对象方法（如Object.keys()和Object.values()）遍历并创建可使用的数组结构的过程。
扫一扫
1244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
