el+vue实战 ② 在el-table中的每一行加上头像/图片;去掉div标签自动换行问题;el-table表格中实现字数限制,只显示一行
处理之前:处理之后:1.在el-table中的每一行加上头像/图片<el-table-column prop="customerName" label="姓名" width="120"><template slot-scope="scope"><div class="list-img"><el-avatar :size="25" :src="scope.r
·
处理之前:
处理之后:
1.在el-table中的每一行加上头像/图片
<el-table-column prop="customerName" label="姓名" width="120">
<template slot-scope="scope">
<div class="list-img">
<el-avatar :size="25" :src="scope.row.customerIcon"></el-avatar>
</div>
{{ scope.row.customerName }}
</template>
</el-table-column>
在el-table-column下加入<template slot-scope="scope">
el-avatar为el头像组件:Element - The world's most popular Vue UI framework
其中src为图片路径,scope.row代表表格中每一行的数据,表格数据格式如下:
tableData: [
{
customerName: "",
customerIcon: "",
},
...
],
其中list-img样式如下:
.list-img {
float: left;
}
2. 去掉div标签自动换行问题
上面的div之所以要加float:left是为了不让div自动换行。
如果不加这行:会导致自动换行。
加了两者之一之后,这里我display:inline效果不太好,所以选择上一种方法。
.list-img {
float: left;
//display:inline;
}
3.el-table表格中实现字数限制,只显示一行
在需要只显示一行的el-table-column中加入show-overflow-tooltip即可
<el-table-column
prop="customerName"
label="姓名"
width="120"
show-overflow-tooltip
>
更多推荐
已为社区贡献3条内容
所有评论(0)