Element Ui el-table列表中的tooltip内容过长超出屏幕换行显示

最新推荐文章于 2025-03-29 13:45:01 发布

原创最新推荐文章于 2025-03-29 13:45:01 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #前端

elementui-table组件列表中的tooltip内容过长超出屏幕换行显示内容,虽然el-table列属性中带的有show-overflow-tooltip，可以设置内容超出列宽度显示为…，且有tooltip提示全部内容，但是内容过多时，提示会超出屏幕：只有全屏才能展示很不友好
在这里插入图片描述
el-table组件自带的属性无法修改为自动换行,也无法控制弹框的宽度太长了不友好
解决方法:

<el-table-column v-if="value.prop == 'remark'" :key="index" :prop="value.prop" :label="value.label"
          :width="value.width || 220">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content" class="text_content">
                {{ scope.row.remark }}
              </div>
              <div class="text_els">
                {{ scope.row.remark }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>

css
然后设置显示内容样式，宽度为多少就是tooltip多宽时换行，text_content为tip的样式，text_els为表格里的样式

  .text_content {
    display: block;
    max-width: 700px;
    white-space: wrap;
    font-size: 14px;
  }
  .text_els {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }