el-table 内的 cell类盒子高度怎么设置成行高

要将`el-table`内的单元格高度设置为行高，你可以使用以下方法：

1. 在`el-table`的列定义中，使用`slot-scope`来获取单元格的数据和索引。例如：

<el-table :data="tableData">
  <el-table-column prop="name">
    <template slot-scope="scope">
      <div class="cell-wrapper">{{ scope.row.name }}</div>
    </template>
  </el-table-column>
</el-table>

2. 在样式中定义`.cell-wrapper`类，并设置其高度为行高。例如：

.cell-wrapper {
  height: 50px; /* 设置行高为50px，根据实际情况调整 */
  display: flex;
  align-items: center;
}

这样，`el-table`内的单元格将应用`.cell-wrapper`类，并且单元格的盒子高度将与行高保持一致。

相关问题

el-table 设置cell单元格高度跟行一样高

要设置 `el-table` 的单元格高度与行高一样，可以使用 `cell-class-name` 属性来指定一个自定义的单元格样式类。然后在这个样式类中设置单元格的高度为行高。具体步骤如下：

1. 在 `el-table` 组件中设置 `cell-class-name` 属性，值为自定义的样式类名，比如 `table-cell`。

<el-table :data="tableData" cell-class-name="table-cell">
  <!-- 表格列定义 -->
</el-table>

2. 在你的样式文件中，定义 `table-cell` 样式类，并设置高度为行高。假设你使用的是默认的行高为 40px。

.table-cell {
  height: 40px;
}

这样，`el-table` 的单元格高度就会与行高一样了。

注意：如果你在 `el-table-column` 中定义了自定义的插槽内容，需要在插槽内容的外层包裹一个 `<div>` 元素，并为该元素设置 `class` 属性为 `table-cell`，以确保插槽内容也应用了相同的高度样式。

<el-table-column prop="name" label="姓名">
  <template slot-scope="scope">
    <div class="table-cell">
      <!-- 自定义插槽内容 -->
    </div>
  </template>
</el-table-column>

el-table cell单元格设置高度百分百怎么不管用

您可以尝试使用 CSS 的方式来设置 `<el-table>` 组件的单元格高度百分比。您可以通过以下步骤进行设置：

1. 首先，为单元格添加一个类名，例如 `custom-cell`。
2. 在样式表中（或者在组件的 `style` 选项中），使用 `.custom-cell` 类名选择器来设置单元格的高度为百分比值。

示例代码如下：

<el-table>
  <el-table-column prop="name" label="Name">
    <template slot-scope="scope">
      <div class="custom-cell">{{ scope.row.name }}</div>
    </template>
  </el-table-column>
  <!-- 其他列... -->
</el-table>

<style>
.custom-cell {
  height: 100%;
}
</style>

请注意，设置百分比高度可能会受到父元素的限制。确保父元素也具有正确的高度设置，例如设置父元素的高度为 `100%` 或具有固定的高度值。

如果问题仍然存在，请提供更多相关代码和上下文，以便更好地帮助您解决问题。