el-table-column的列名不换行
时间: 2023-12-15 16:32:32 浏览: 42
可以通过给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 勾选框 设置列名
您可以在 el-table-column 组件中使用 type="selection" 来创建勾选框列。然后,可以使用 prop 属性来设置列的名称,例如:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" prop="name" label="选择"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
在上面的示例中,我们使用 type="selection" 创建勾选框列,并使用 prop="name" 设置列的名称为“选择”。
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内部的换行效果。