首页 > 其他分享 >富文本内容在el-table中回显并且带省略号

富文本内容在el-table中回显并且带省略号

时间:2024-04-11 15:56:30浏览次数:24  
标签:el 省略号 回显 webkit table overflow

html部分

<el-table>
<el-table-column label="茶园介绍" width="100">
          <template slot-scope="{ row }">
           <div class="show-ellipsis" v-html="row.profile" @click="viewCyProfileFun(row)">        
           </div>
          </template>
</el-table-column>
</el-table>    

  

css部分

<style lang="scss">
.show-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; //控制显示的行数
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  p {
    img {
      height:20px;
      width: 20px;
    }
  }
}
</style>

  

标签:el,省略号,回显,webkit,table,overflow
From: https://www.cnblogs.com/xiaoqilaile/p/18129395

相关文章

  • Elastic Search term, match, match_phrase 和 match_phrase_prefix 查询时的区别
    字段类型分keyword(不分词)和text(分词)字段值为"quickbrownfox",详细的createindex和insertdata语句在后边注意:keyword类型字段不分词,text类型字段keyword类型的字段值就是"quickbrownfox",不分词,必须当成一个整体text类型的字段值是"quickbrownfox",分词,可以当成......
  • electron集成第三方视频会议(整个目录资源含exe)进来,开发/打包坑点集锦
    场景:electron做个welink那种会议功能,需要集成第三方去进入会议,需要做的是在electron里面打开这个通道对方给了一个文件夹,里面含有.exe,需要调用shell命令去打开这个exe传些参数1.把整个会议文件夹放在/resources下主要是记住三个环境变量的路径方法(因为在electron中所以得看el......
  • Selenium 笔记
    相关资料Selenium官网Selenium文档SeleniumPython接口文档如果要查看其他语言的Selenium接口文档,见下载SeleniumW3CWebDriver规范Web驱动器可以访问Selenium官方Web驱动器生态查看各主流浏览器的Web驱动器下载Chrome也包含了ChromeDriver文档115以后版本115以......
  • 攻防世界 Level0 PWN
    查壳[*]'\level'Arch:amd64-64-littleRELRO:NoRELROStack:NocanaryfoundNX:NXenabledPIE:NoPIE(0x400000)ida//mainint__cdeclmain(intargc,constchar**argv,constchar**envp){writ......
  • python 操作 Elasticsearch7.x版本
    目录python操作Elasticsearch7.x版本1.连接Elasticsearch2.索引操作3.文档操作4.查询/搜索文档4.1body和query参数4.2其他查询示例python操作Elasticsearch7.x版本需要先安装这个库pip3installelasticsearch==7.9.1,python版本为3.7及以上这个是elasticsearch库......
  • Elasticsearch之-Django框架集成
    目录Elasticsearch之-Django框架集成一、elasticsearch-dsl库的使用二、与django框架集成Elasticsearch之-Django框架集成需要安装的库:安装:pip3installelasticsearch-dsl一、elasticsearch-dsl库的使用#示例fromdatetimeimportdatetimefromelasticsearch_dslimpo......
  • el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-cha
        写这篇博客的原因是前段时间做了一个数据列可变的表格,同时需要实现在网页中更新了数据列之后,能够对表格进行排序的需求。如果想要直接了解实现el-table的动态数据动态排序(列数据是通过计算获得,并且可以在页面中修改,在此基础上实现数据变化后实时更新)。请直接跳到......
  • TypeError: Cancel() takes 0 positional arguments but 1 was given 的一种原因
    python非静态成员函数在自定义python类中,使用pycharm作为IDE,其补全功能会自动为类内的function创建self作为函数的第一参数。一些普通的IDE或者没有专门设置的IDE不会为类内的方法添加self作为第一参数,因此需要coder们自行添加。除非是静态函数不需要self作为参数。如......
  • 多级动态表头导出-easyexcel
    导出如下动态表头 主要的构造tabCols和tableData,注意表头的字段,基本构造出了该格式所有的都能适配@GetMapping("/exportData")publicvoidexcelExport(TbDtTargetHealthMontbDtTargetHealthMon,HttpServletResponseresponse)throwsIOException{re......
  • 【Shell】if选择结构语法实例
    if结构用于在Shell脚本中进行判定。如果指定的条件为真,则执行指定的命令。if和then若写在同一行,then与语句之间要使用分号“;”隔开。if语句结构一定要以“fi”结尾。1.单分支结构语法格式ifconditionthencommand1command2...commandNfi......