望城区网站建设发外链平台

实现 <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><inputv-elsev-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%即可。