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>

成果:

相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript