element ui table show-overflow-tooltip自定义样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui table show-overflow-tooltip自定义样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element ui table show-overflow-tooltip自定义样式

在使用element ui table 组件时，表格td内容太多可设置show-overflow-tooltip参数来控制显示方式，默认配置显示如下

<el-table-column prop="operateContent" label="操作内容" width="300" show-overflow-tooltip>
 </el-table-column>

showoverflowtooltip 自定义,ui,前端,javascript
该显示方式不满足需求，需要自定义样式

<el-table-column prop="operateContent" label="操作内容" width="300">
      <template slot-scope="scope">
         <el-popover placement="left" trigger="hover">
           <template>
             <div class="set-popper" v-html="scope.row.operateContent"></div>
           </template>
           <div slot="reference" class="set-content">
             {{ scope.row.operateContent }}
           </div>
         </el-popover>
       </template>
 </el-table-column>

删除show-overflow-tooltip配置，通过template里面自定义el-popover组件，placement参数为显示位置，v-html绑定的是popover显示内容，slot="reference"为table中该行显示内容，对应给两个class设置如下样式。给popover内容设置固定宽度，给表格内容设置超出两行显示…

.set-popper {
  width: 431px;
}
.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

最终展示效果：
showoverflowtooltip 自定义,ui,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-523215.html