elementui中的el-table 中show-overflow-tooltip自定义样式
背景:表格一行中描述列有时候内容太长,可设置show-overflow-tooltip参数来控制显示方式,默认配置显示如下:

			    <el-table-column prop="description" label="描述" width="180" :show-overflow-tooltip="true"></el-table-column>

但是只显示一行,占满了整个屏幕,不好看,如下所示:
在这里插入图片描述
该显示方式不满足需求,需要自定义样式 代码如下:

  <el-table-column prop="description" label="描述">
              <template slot-scope="scope">
                <el-popover placement="left" trigger="hover">
                  <template>
                    <div
                      class="set-popper"
                      v-html="scope.row.description"
                    ></div>
                  </template>
                  <div slot="reference" class="set-content">
                    {{ scope.row.description }}
                  </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:500px;
}
.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

最终展示效果如下:
在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐