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>

成果:

相关推荐
软件技术NINI1 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front2 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie2 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀3 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树3 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔3 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城3 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04124 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj504 小时前
前端基础之《React(1)—webpack简介》
前端·react