vue中Column = [ { "disname" : "项目", "prop" : "fymc", "width": "250px" }] 让这个字段如果过长,过长的内容变成省略号
时间: 2023-07-24 19:16:00 浏览: 197
表格内容 超过长度用省略号代替
5星 · 资源好评率100%
要在 Vue 中实现字段内容过长时显示省略号,你可以按照以下步骤进行操作:
1. 在你的 Vue 组件中,定义一个样式类,用于处理文字溢出问题。例如:
```css
.column-ellipsis {
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```
在上述样式中,我使用了 `width: 250px;` 来限制列的宽度为 250 像素,并使用 `text-overflow: ellipsis;` 来显示省略号。
2. 在你的数据表格组件中,使用上述样式类来设置列的样式。例如:
```html
<el-table :data="yourData">
<el-table-column
prop="fymc"
label="项目"
:class-name="['column-ellipsis']"
></el-table-column>
</el-table>
```
在上述代码中,我将 `column-ellipsis` 样式类应用到了列上,这样当字段内容过长时,会自动显示省略号。
通过以上步骤,你可以在 Vue 中实现字段内容过长时显示省略号。记得根据你的实际需求修改样式类和表格数据绑定的部分。
阅读全文