element -ui 实现纵向表格,单元格包裹多行

css 复制代码
  <el-table
                :data="tableData1"
                :cell-style="{ 'text-align': 'center' }"
                :header-cell-style="{
                    textAlign: 'center',
                    background: '#E5E5E5',
                    'border-color': '#B3B3B3',
                    height: '38px',
                    lineHeight: '38px',
                }"
                border
                class="no-header"
                :cell-class-name="getCellClass"
                :header-cell-class-name="getCellClass"
                style="width: 30%"
            >
                <el-table-column prop="name" width="180"> </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <div
                            v-for="(temp, index) in scope.row.temperatures"
                            :key="index"
                        >
                            {{ temp.type }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <div
                            v-for="(temp, index) in scope.row.temperatures"
                            :key="index"
                        >
                            {{ temp.value }}°C
                        </div>
                    </template>
                </el-table-column>
            </el-table>

data定义的数据,处理数据按照这个格式处理即可:

python 复制代码
   tableData1: [
                {
                    name: "B1",
                    temperatures: [
                        { type: "最高温", value: 30 },
                        { type: "最低温", value: 10 },
                        { type: "平均温", value: 20 },
                    ],
                },
                {
                    name: "B2",
                    temperatures: [
                        { type: "最高温", value: 35 },
                        { type: "最低温", value: 15 },
                        { type: "平均温", value: 25 },
                    ],
                },
            ],

调用边框的方法:

python 复制代码
 methods: {
        getCellClass() {
            return "table-cell-border";
        },
sql 复制代码
<style scoped>
::v-deep .table-cell-border {
    border: 1px solid #b3b3b3; /* 调整边框的颜色和样式 */
}
::v-deep .no-header .el-table__header-wrapper {
    display: none;
}
</style>

成果:

相关推荐
小梦白13 分钟前
RPG59.玩家拾取物品三:可拾取物品的提示UI
ui·ue5
群联云防护小杜14 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台32 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹38 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法