如何设置el-table-column内容不换行
时间: 2023-11-08 11:06:07 浏览: 132
可以使用 CSS 的 white-space 属性来设置 el-table-column 内容不换行,将其设置为 nowrap 即可。
例如:
```
<el-table-column prop="name" label="姓名" :min-width="100" :width="150">
<template slot-scope="{ row }">
<div style="white-space: nowrap">{{ row.name }}</div>
</template>
</el-table-column>
```
相关问题
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>
el-table-column换行
el-table-column内部换行有多种方法可以实现。其中一种方法是使用render-header属性,并在renderHeader方法中返回一个span元素,其中包含多个span元素和br元素。每个span元素对应一个换行的内容。以下是一个示例代码:
<el-table :data="tableList2" border style="width: 100%">
<el-table-column :render-header="renderHeader" prop="level" label="这是一个/很长的表头"></el-table-column>
<el-table-column :render-header="renderHeader" prop="desc" label="不是一个/很短的表头"></el-table-column>
</el-table>
methods: {
renderHeader(h, { column, $index }) {
return h('span', {}, [
h('span', {}, column.label.split('/')),
h('br'),
h('span', {}, column.label.split('/')[1])
]);
}
}
另一种方法是在样式中添加"white-space: pre-wrap"属性,这将允许换行。以下是一个示例代码:
<el-table :data="tableList2" border style="width: 100%">
<el-table-column prop="level" label="这是一个/很长的表头" style="white-space: pre-wrap"></el-table-column>
<el-table-column prop="desc" label="不是一个/很短的表头" style="white-space: pre-wrap"></el-table-column>
</el-table>
请注意,这两种方法都可以实现el-table-column内部的换行效果。