elementui表格内容不换行
时间: 2023-08-22 18:07:27 浏览: 110
Vue2.0+ElementUI实现表格翻页的实例
你可以使用 Element UI 表格组件的 slot-scope 属性来自定义单元格的内容,并在需要换行的地方使用 `<br>` 标签来实现换行效果。下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<div style="white-space: pre-wrap;">{{ scope.row.name }}</div>
</template>
</el-table-column>
<!-- 其他列的配置 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三\n李四' },
// 其他数据
]
};
}
};
</script>
```
在上面的示例中,通过给 `<div>` 标签添加 `style="white-space: pre-wrap;"`,可以让文本内容保留换行符,并在需要换行的地方使用 `\n` 进行换行。这样,当表格渲染时,换行符会被识别并显示为换行效果。
希望这可以帮助到你!如有任何疑问,请随时追问。
阅读全文