el-table-column中的el-input影响行高
时间: 2024-08-17 21:02:41 浏览: 29
在Element UI的`el-table-column`组件中,当嵌套了`el-input`作为列的内容,并且这个输入框有默认值或者是用户进行了编辑,它可能会导致表格行的高度发生变化。这是因为`el-input`有自己的默认样式和高度,当其内容变化时,它的DOM结构会更新,从而触发浏览器重新计算行的高度。
例如,如果你有一个带编辑功能的表头,当输入框内容变长,行内的高度可能会包含输入框的底部边距、内边距以及滚动条等元素,这可能导致行的高度比其他未编辑的行要高。为了解决这个问题,你可以尝试调整`el-input`的高度,设置固定高度或者使用`line-height`控制文字在输入框中的垂直对齐。
此外,如果你希望所有行的高度保持一致,可以考虑在`el-input`上添加样式规则,限制其高度,或者在表格全局设置固定的行高(`table-row-height`)。
相关问题
el-table-column点击行高亮
要实现 el-table-column 点击行高亮,可以通过设置 table 的 highlight-current-row 属性为 true,然后在 el-table-column 中设置 selectable 属性为 true。这样就可以实现点击行高亮了。
示例代码如下:
```
<el-table :data="tableData" highlight-current-row>
<el-table-column type="selection" selectable></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
el-table-column 的行高怎样设置
你可以通过设置 `el-table-column` 组件中的 `min-height` 属性来调整行高。例如:
```
<el-table-column prop="name" label="姓名" min-height="60px"></el-table-column>
```
这样就将该列的行高设置为 60px。你也可以在样式表中针对 `el-table-column` 元素设置行高,例如:
```
.el-table-column {
min-height: 60px;
}
```
这样将会将所有 `el-table-column` 组件的行高都设置为 60px。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)