热门标签
热门文章
- 1java实现FIFO和LRU页面置换算法_java编程实现lru算法,置换算法程序提供内存访问序列的输入界面,输出正确的置换过
- 2【selenium】解决页面加载时间过长问题_使用selenium打开网页为什么浏览器一直加载
- 3Vue常用插件总结_vite lightbox
- 4yolov5改进之Fasternet主干网络替换_fasternet改进
- 5实践练习二：手动部署3副本集群（4.0版本）_observer 启动端口
- 62024年如何成为技术创作KOL？| 分享抽龙年公仔
- 7SpringBoot 缓存(EhCache 使用)_public int save(user user) {
- 8两种方法教你在postman设置请求里带动态token_postman带token发请求
- 9【TCP专题】TCP连接断开_tcp断开连接
- 10npm安装依赖包出错问题处理_npm cache clean --force
当前位置: article > 正文
el+vue实战 ② 在el-table中的每一行加上头像/图片；去掉div标签自动换行问题；el-table表格中实现字数限制，只显示一行_
作者：繁依Fanyi0 | 2024-02-18 01:23:19
赞
踩
处理之前：
处理之后：
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
- >
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/103249
推荐阅读
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
