el-table列自动换行
时间: 2024-03-21 16:36:34 浏览: 73
`el-table` 是 Element UI 库中的一个组件,用于创建表格。在 `el-table` 中,可以使用 `wrap-text` 属性来实现列自动换行。
`wrap-text` 属性用于控制表格单元格中的文本换行方式。默认情况下,如果单元格中的文本太长,它会在单元格中垂直滚动。但是,通过设置 `wrap-text` 属性为 `true`,表格会自动调整列宽以适应文本的长度,并在必要时进行换行。
以下是使用 `wrap-text` 属性实现列自动换行的示例代码:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180" wrap-text></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2023-06-15',
name: '张三',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2023-06-16',
name: '李四',
address: '上海市浦东新区世纪大道 888 号'
}]
}
}
}
</script>
```
在上面的示例中,姓名列使用了 `wrap-text` 属性,因此当单元格中的文本太长时,表格会自动调整列宽并换行显示。
需要注意的是,`wrap-text` 属性只适用于表格列,而不适用于表格行。另外,如果表格列包含的是数字、日期等非文本类型的数据,自动换行可能不会生效。在这种情况下,你可能需要手动调整列宽或使用其他方法来适应数据类型。
阅读全文