el-table prop是数组如何多行展示
时间: 2023-12-29 21:05:51 浏览: 98
改变el-table宽度
5星 · 资源好评率100%
如果 `el-table` 的 `prop` 是数组,你可以使用 `el-table-column` 的 `formatter` 属性来实现多行展示。具体步骤如下:
1. 将 `el-table-column` 的 `prop` 设置为数组中需要展示的属性。
2. 在 `el-table-column` 中添加 `formatter` 属性,该属性值为一个函数,可以返回需要展示的内容。在该函数中,你可以使用 HTML 标签来实现多行展示。
例如,如果你的 `prop` 是 `data` 数组中的 `description` 属性,你可以这样实现多行展示:
```html
<el-table :data="data">
<el-table-column prop="description" label="Description">
<template slot-scope="scope">
<div v-html="formatDescription(scope.row.description)"></div>
</template>
</el-table-column>
</el-table>
```
其中,`formatDescription` 是一个方法,用于将文本转换为多行展示的 HTML 代码:
```javascript
methods: {
formatDescription(description) {
return description.replace(/\n/g, '<br>');
}
}
```
使用 `replace` 方法将字符串中的换行符 `\n` 替换为 HTML 标签 `<br>`,从而实现多行展示。
阅读全文