vue elementui tooltip 内容省略以及字数过滤

最新推荐文章于 2024-07-01 17:49:35 发布

大毛裤儿

最新推荐文章于 2024-07-01 17:49:35 发布

阅读量742

点赞数

文章标签： javascript html css3 css vue.js

本文链接：https://blog.csdn.net/m0_60206780/article/details/124245884

版权

该博客详细介绍了如何在Vue项目中利用Element-UI组件库，结合自定义过滤器和CSS样式，实现表格单元格内描述的智能提示功能以及表单元素标题的截断显示。通过设置`el-tooltip`组件提供内容预览，同时应用CSS的`-webkit-line-clamp`属性限制多行文本显示，确保界面在有限的空间内保持整洁且信息完整。

摘要由CSDN通过智能技术生成

表格方法

<el-table-column
 width="130"
  prop="operationDescription"
  header-align="center"
  align="center"
  label="描述">
  <template slot-scope="scope">
    <el-tooltip :content="scope.row.operationDescription" placement="top">
      <p class="showOverTooltip">{{scope.row.operationDescription | ellipsis }}</p>
    </el-tooltip>
  </template>
</el-table-column>

表单方法

<el-tooltip :content="item.problemTitle" placement="top">
	<div class="showOverTooltip">
		<span style="background: #999;width: 3px;height: 3px;border-radius: 50%;display: inline-block;margin:5px 3px 3px 0;"></span>
	  <span style="color:#409eff;cursor:pointer;">{{ item.problemTitle | ellipsis }}</span>
	  <span style="margin-left:5px;float: right;">{{ item.replyNum }}个回答</span>
	</div>
</el-tooltip>

js部分

//过滤器
//根据字数过滤
filters: {
  ellipsis(value) {
    if (!value) return "";
    if (value.length > 69) {
      return value.slice(0, 69) + "...";
    }
    return value;
  }
},

css部分

.showOverTooltip{
  display:-webkit-box;
   text-overflow:ellipsis;
   overflow:hidden;
     /*这里是3行*/
   -webkit-line-clamp: 3;
   -webkit-box-orient:vertical;
 }