热门标签
热门文章
- 1【AI_数学知识】线性代数_权重向量
- 22024年美赛E题：财产保险的可持续性 Sustainability of Property Insurance 思路模型代码解析_哈特拉斯角灯塔搬迁
- 3react【五】redux/reduxToolkit/手写connext
- 4python成语接龙_python成语自动生成代码
- 5通过全局异常处理返回openfeign接口调用结果_openfegion怎么进行统一异常处理
- 6Gitlab使用ssh方式请求需要密码的解决方法_docker 进入 部署gitlab ssh需要输入密码
- 7最新综述！AIGC到底是什么？都有哪些应用？一文尽览！
- 8Python通过上下文管理器使用进程池multiprocessing.Pool_multiprocessing sw 上下文
- 9图像识别-ResNet-18网络结构图示及解读_resnet18网络结构
- 10AtCoder算法竞技平台简介
当前位置: article > 正文
element table表头文本溢出 省略号隐藏_el-table 文字溢出
作者：繁依Fanyi0 | 2024-02-16 07:17:32
赞
踩
el-table 文字溢出
- <el-table :data="data_list" style="width: 100%; font-size: 14px;" border>
- <template v-for="(item,index) in tableCol">
- <el-table-column
- :key="index"
- :prop="item.prop"
- :label="item.label"
- :min-width="item.minWidth"
- :show-overflow-tooltip="true"
- >
- <template slot-scope="scope" slot="header">
- <div @onMouseOver="onMouseOver('refName' + scope.$index)">
- <el-tooltip :disabled="isShowTooltip" :content="item.label" placement="top">
- <div class="title">
- <span :ref="'refName' + scope.$index">{{item.label}}</span>
- </div>
- </el-tooltip>
- </div>
- </template>
- </el-table-column>
- </template>
- </el-table>
-
-
- onMouseOver(refName) {
- let parentWidth = this.$refs[refName][0].parentNode.offsetWidth;
- let contentWidth = this.$refs[refName][0].offsetWidth;
- // 判断是否开启tooltip功能
- if (contentWidth > parentWidth) {
- this.isShowTooltip = false;
- } else {
- this.isShowTooltip = true;
- }
- },
-
- //style
- .title {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/91723
推荐阅读
相关标签
