修改el-table的悬浮框宽高

在Element UI的`el-table`组件中，如果你想自定义悬浮框（通常指表头的列头部分）的宽度和高度，你可以通过CSS样式来进行定制。`el-table-column`的头部有一个名为`cell`的内联样式元素，你可以针对这个元素来设置。

例如，如果你想将某列的列头高度设为40px，宽度设为150px，可以这样做：

.el-table__header-cell .cell {
  height: 40px;
  width: 150px;
}

如果你需要全局调整所有列头的高度或宽度，可以在`.el-table__header`或`.el-table__header-cell`选择器上设置相应的样式。

如果是在Vue模板中直接操作CSS，可以使用`:style`属性传入一个动态计算的对象：

<el-table-column :style="{ height: '40px', width: '150px' }"></el-table-column>

注意：修改高度可能会影响表格的整体布局，特别是当滚动条出现时。请根据实际需求谨慎调整。

相关问题

修改el-table的悬浮框高度

在Element UI的`<el-table>`组件中，如果你想自定义行的悬停框（即hover row效果下的框）的高度，这通常是通过CSS样式来实现的。你需要找到对应行元素的`:hover`伪类选择器，并设置`box-shadow`属性中的`height`值。

例如，假设你想将悬停框高度设置为4px，你可以添加如下的CSS规则：

.el-table tbody tr:hover {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15) !important;
}

这里的`!important`是为了确保优先级高于默认样式。如果你不想影响其他地方的`box-shadow`，可以只针对特定的表单ID或者类名应用这个样式。

如果你需要动态调整高度，可以将高度作为变量存储，然后引用这个变量：

:deep(.yourTableSelector) tbody tr:hover {
  box-shadow: 0 var(--hover-box-height) 0 rgba(0, 0, 0, 0.15);
}

/* 或者在JavaScript中动态设置 */
document.getElementById('yourTableId').style '--hover-box-height' = '4px';

el-table设置el-table-column宽不起作用

在 Element UI 中，如果需要设置 `el-table-column` 的宽度，可以通过以下几种方式实现：

1. 使用 `width` 属性

在 `el-table-column` 上设置 `width` 属性即可改变列宽度。例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" width="200"></el-table-column>
  <el-table-column prop="age" label="年龄" width="100"></el-table-column>
</el-table>

2. 使用 `min-width` 和 `max-width` 属性

可以使用 `min-width` 和 `max-width` 属性来设置列的最小和最大宽度。例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" min-width="100" max-width="300"></el-table-column>
  <el-table-column prop="age" label="年龄" min-width="50" max-width="100"></el-table-column>
</el-table>

3. 使用 CSS 样式

还可以通过在 `el-table-column` 上设置 `class-name` 属性来自定义样式，并通过 CSS 设置列宽度。例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" class-name="custom-column"></el-table-column>
  <el-table-column prop="age" label="年龄" class-name="custom-column"></el-table-column>
</el-table>

<style scoped>
.custom-column {
  width: 200px;
}
</style>

如果以上方法都无法解决您的问题，建议检查一下是否有其他 CSS 样式或 JavaScript 代码影响了表格列的宽度。另外，也可以尝试更新 Element UI 的版本或者在 Element UI 的 GitHub 上提出 issue 寻求帮助。