在Vue中实现
table自动换行有多种方法，以下是一些常见的实现方式：
### Vue
3 结合 Element Plus 的 `<el-
table>` 组件实现行数据
自动换行
可使用 CSS 方法，确保当表格中的行数据文本过长时能够
自动换行，而非溢出到其他单元格或简单截断[^1]。
### 前端 Vue 用 `<el-
table>` 实现表头内容过长
换行处理
通过在表头模板中使用 `<div>` 标签
换行实现。示例代码如下：
```vue
<el-
table ref="my
Table"
border>
<el-
table-column prop="address" label="可写可不写了">
<template #header>
<div>我是第一行</div>
<div>我是第二行</div>
</template>
</el-
table-column>
</el-
table>
```
这种方式可以直接让表头内容
换行显示[^2]。
### jeecg - vue
3 在 `Basic
Table` 表格中实现文字内容
自动换行并
自动撑开容器高度
在表格做列表展示时，标题列一般用插槽实现，以实现点击打开详情及显示标签等附加属性。示例代码如下：
```vue
<Basic
Table @register="register
Table" :rowSelection="rowSelection">
<template #name="{ record }">
<div class="flex task-title">
<a-button type="link" @click="openTaskDetailModal(true, { record })">{{ record.name }}</a-button>
<template v-if="record.tags">
<div class="flex flex-items-center">
<template v-for="it in record.tags.split(&#
39;,&#
39;)">
<a-tag :color="TAGS[it]" :style="{ marginRight: &#
39;5px&#
39; }">{{ it }}</a-tag>
</template>
</div>
</template>
</div>
</template>
</Basic
Table>
```
此方法可使表格文字内容
自动换行并撑开容器高度[^
3]。
### antd - vue
table 表头
换行
#### 方式一
通过在 `title` 中返回包含 `<br/>` 标签的 `<div>` 元素实现
换行。示例代码如下：
```javascript
colnums: [
{
title: () => {
return (
<div>
<span>长标题</span>
<br/>
<span>第二行</span>
</div>
)
},
dataIndex: &#
39;longTitle&#
39;,
scopedSlots: {customRender: &#
39;longTitle&#
39;},
align: &#
39;center&#
39;,
width: 120
}
]
```
#### 方式二
通过 `customHeaderCell` 方法设置表头单元格的样式，实现
换行。示例代码如下：
```javascript
colnums: [
{
title: &#
39;长标题&#
39;,
dataIndex: &#
39;longTitle&#
39;,
scopedSlots: {customRender: &#
39;longTitle&#
39;},
align: &#
39;center&#
39;,
width: 120,
customHeaderCell: () => {
return {
style: {
wordWrap: &#
39;break-word&#
39;,
wordBreak: &#
39;break-all&#
39;,
whiteSpace: &#
39;normal&#
39;,
minHeight: &#
39;50px&#
39;,
width: &#
39;150px&#
39;,
}
}
}
}
]
```
这两种方式都能实现 antd - vue
table 表头
换行[^4]。
### Vue `<el-
table>` 内容
换行
在模版中遍历数组，用块标签渲染实现内容
换行。示例代码如下：
```vue
<div v-for="text in categoryText(scope.row.configCategorys)" :key="text">{{ text }}</div>
```
此方法可让表格内容
换行显示[^5]。
本文介绍了一种在网页中设置表格单元格文字换行及整个表格内容断行的方法。通过调整表格的属性，使得表格在显示大量文字时能够自动换行，避免内容溢出。文中详细解释了如何使用HTML和CSS来实现这一效果。
扫一扫
1168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
