热门标签
热门文章
- 1MySQL下载与安装详细教程（仅供参考）_mysql下载及安装教程
- 2ubuntu系统实现远程控制_ubuntu server远程监控
- 3C#编码规范_c# 代码规范
- 4python入门中_
- 5python_写一个函数，求两个整数之和，要求在函数体内不得使用+、-、*、/四则运算符号。_(+,-,*/)和两个整数python
- 6python_matplotlib分别使用plot()和scatter()画散点图，以及如何改变点的大小_python scatter点的大小
- 7java conversion_java.util.UnknownFormatConversionException: Conversion = '''；
- 8git拉取hugging face代码失败：443_能访问huggingface但是拉代码时443了
- 9统计挖掘那些事-与相关的故事_样本复相关系数,样本决定系数,简单相关系数,偏决定系数,偏相关系数
- 10Linux中使用 ssh -T “git@gitee.com“ 连接git或者clone克隆报错: Permission denied (publickey). Linux配置git公钥无效问题_gitee 添加ssh 公匙 克隆失败
当前位置: article > 正文
el-table设置多行显示省略号_el-table tooltip限制行数
作者：IT小白 | 2024-02-18 01:27:10
赞
踩
el-table tooltip限制行数
show-overflow-tooltip自带属性是超出一行显示省略号，如果不满足要求需要自己修改的话可以借助插槽和el-tooltip去实现
- <el-table-column width :label="$t('用户角色')" prop="roleNameList">
- <template slot-scope="{row}">
- <el-tooltip effect="dark" :content="row.roleNameList" placement="top">
- <div
- style="width:100%;padding: 0px;display: -webkit-box;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;white-space: normal;line-height:18px;"
- >{{row.roleNameList}}</div>
- </el-tooltip>
- </template>
- </el-table-column>
-webkit-line-clamp:行数;修改行数可以实现超出你想要的行数显示省略号
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/103283
推荐阅读
相关标签
