ElementUI怎样一列显示多行
时间: 2024-11-15 11:27:19 浏览: 53
Element UI 提供了一个名为`el-table`的数据表格组件,可以用于展示数据,并支持自定义列内容的格式化。如果你想要在一列中显示多行文本,你可以通过设置列的`formatter`属性来实现。这个属性是一个函数,接受当前行的数据和当前单元格的索引作为参数,返回你需要渲染的HTML字符串。
下面是一个简单的例子:
```html
<template>
<el-table :data="tableData">
<el-table-column label="标题" prop="title">
<!-- 使用formatter处理多行文本 -->
<template slot-scope="scope">
<span v-html="scope.row.content"></span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ title: '一行', content: '<p>这是第一行的内容</p>' },
{ title: '多行', content: '<p>这是第二行的第一行<br>这是第二行的第二行</p>' },
]
};
}
};
</script>
```
在这个例子中,`content`字段包含的是HTML格式的文本,`v-html`指令会将它安全地插入到DOM中,从而实现多行显示。
阅读全文