实现 <table> 内第一行高度设定为 60px,第二行和右侧元素高度补齐的效果,你可以通过 CSS 样式来控制。示例:
- 为第一行 <tr> 设置固定高度 60px。
- 对于右侧元素,假设它是一个 <div> 或者其他容器,将其与表格第二行通过布局关联起来,使用 Flexbox 或 Grid 布局让它们高度自动匹配。这里假设右侧元素和表格在一个 <el-row> 中,借助 Flexbox 布局实现高度匹配。
-
<template> <!-- ... existing code ... --> <el-row :gutter="20" style="display: flex; align-items: stretch;"> <el-col :span="12"> <div class="table"> <div class="table_title">重要社会关系asdfasdfasdf</div> <div class="table_subtitle"> <div class="table_class">1.bktt</div> <div class="cus_label"> <span>无此类情况</span> <span class="cus_label_box"> <span class="cur_label_box_icon">对号</span> </span> </div> </div> <div class="table_cont"> <table style="width:1024px;border:solid 1px #000"> <tbody> <tr style="height: 60px;"> <!-- 第一行设置高度为 60px --> <td>姓名</td> <td>工作单位</td> <td>现职</td> </tr> <tr> <td>张三</td> <td @click="editCell($event, 0, 1)"> <span v-if="!editingCells[0][1]">{{ tableData[0].workUnit }}</span> <input v-else v-model="tableData[0].workUnit" ref="inputRefs[0][1]" @keydown.enter="onEnter($event, 0, 1)" @keydown.tab="onTab($event, 0, 1)" style="border: none; outline: none; width: 100%;" /> </td> <td>经理</td> </tr> <tr> <td>李四</td> <td>YY 机构</td> <td>职员</td> </tr> </tbody> </table> </div> </div> </el-col> <el-col :span="12"> <!-- 右侧元素 --> <div style="background-color: #f0f0f0; padding: 10px;"> <!-- 这里可以放置右侧的具体内容 --> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-radio> </div> </el-col> </el-row> <!-- ... existing code ... --> </template> <script setup> // ... existing code ... </script> <style scoped> .table_cont table { height: 100%; /* 确保表格高度占满父容器 */ } .table_cont table tr { box-sizing: border-box; } </style>
第二行,设置高度为100%即可。