el-table-column 内容自动换行,但是我需要的效果是让它不自动换行
时间: 2023-11-11 08:15:23 浏览: 109
如果你想让el-table-column的内容不自动换行,你可以使用以下CSS样式:
```
.el-table-column {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
```
这样,el-table-column的内容就不会自动换行,而是被省略号替代。你可以根据需要调整样式,比如将text-overflow设置为clip,这样就不会显示省略号了。
相关问题
el-table-column的列名不换行
可以通过给el-table-column增加show-overflow-tooltip样式来解决列名换行的问题。具体实现方法如下所示:
```html
<el-table-column prop="goodscode" label="货物代码" width="80" show-overflow-tooltip>
<template scope="scope">
<div style="text-decoration:underline;cursor:pointer;">{{ scope.row.goodscode}}</div>
</template>
</el-table-column>
```
在el-table-column标签中增加show-overflow-tooltip属性即可实现列名不换行。
el-table-column内容不换行
可以使用CSS的white-space属性来控制el-table-column中的内容不换行。将white-space属性设置为nowrap即可。例如:
<el-table-column prop="name" label="姓名" :min-width="100" :width="150" :formatter="nameFormatter">
<template slot-scope="{ row }">
<div class="nowrap">{{ row.name }}</div>
</template>
</el-table-column>
<style>
.nowrap {
white-space: nowrap;
}
</style>