el-table-column fixed 低版本浏览器兼容
时间: 2023-11-23 14:58:09 浏览: 37
根据提供的引用内容,没有明确提到el-table-column fixed在低版本浏览器上的兼容性问题。但是可以通过覆盖el-table__fixed-right和el-table__fixed的CSS样式来解决高度错乱的问题。具体操作如下:
```css
.custom_table ::v-deep .el-table__fixed-right, .custom_table::v-deep .el-table__fixed {
height: 100% !important;
}
```
这段CSS代码可以覆盖el-table__fixed-right和el-table__fixed的样式,将它们的高度设置为100%。这样可以解决高度错乱的问题。
相关问题
el-table-column的fixed:right失效怎么解决
如果 `el-table-column` 的 `fixed` 属性设置为 `right` 后失效,可能是因为该列所在的 `<el-table>` 组件的宽度未设置,或者设置不合理。
请尝试给 `<el-table>` 组件设置一个固定宽度,或者使用 `flex` 布局来设置宽度。
例如,给 `<el-table>` 组件设置一个固定宽度:
```html
<el-table :data="tableData" style="width: 800px;">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄" fixed="right"></el-table-column>
</el-table>
```
或者使用 `flex` 布局来设置宽度:
```html
<div style="display: flex; flex-direction: column; height: 400px;">
<el-table :data="tableData" style="flex: 1;">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄" fixed="right"></el-table-column>
</el-table>
</div>
```
这样应该就能解决 `el-table-column` 的 `fixed` 属性设置为 `right` 后失效的问题了。
el-table-column fixed 后滚动条不能使用
如果使用 el-table-column 的 fixed 属性,滚动条会被 el-table 的外部容器覆盖,导致无法使用。解决方法是给 el-table 组件添加一个样式 `overflow: auto` 来显示滚动条,示例代码如下:
```html
<el-table :data="tableData" style="width: 100%; overflow: auto;">
<el-table-column prop="name" label="Name" fixed></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
```
另外,如果你在使用 fixed 属性后还想要表格自适应页面宽度,可以给 el-table 组件添加 `max-height` 和 `min-width` 样式,示例代码如下:
```html
<el-table :data="tableData" style="width: 100%; overflow: auto; max-height: 500px; min-width: 600px;">
<el-table-column prop="name" label="Name" fixed></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
```
这样就可以使用 fixed 属性并且正常显示滚动条了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)