vue+elementUI当文本超出一定字数时显示省略号-北忘山博客

在el-table中

<el-table-column :show-overflow-tooltip="true">
</el-table-column>

参考官方教程：https://element.faas.ele.me/#/zh-CN/component/table

然后鼠标放上去还有tooltip

通用

设置过滤器

filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    }
  },

使用过滤器

<el-table-column label="题干" width="600">
        <template slot-scope="scope">
          <span>{{scope.row.content | ellipsis}}</span>
        </template>
</el-table-column>

版权声明 1、本网站名称：北忘山
2、本站永久网址：https://www.beiwangshan.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长邮箱hi#beiwangshan.com(@替换#)进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END