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>

成果:

相关推荐
面向星辰9 小时前
html各种常用标签
前端·javascript·html
梦6509 小时前
HTML新属性
前端
东风西巷11 小时前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
森之鸟12 小时前
Mac电脑上如何打印出字体图标
前端·javascript·macos
mCell12 小时前
GSAP 入门指南
前端·javascript·动效
gnip13 小时前
组件循环引用依赖问题处理
前端·javascript
Aotman_14 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_61414 小时前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf14 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育15 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育