vue+elementUI当渲染文本超出一定字数时显示省略号

原创于 2019-07-30 17:29:36 发布 · 1.8w 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了一种在前端开发中处理长文本溢出的方法，通过使用Vue.js的过滤器功能，实现当文本长度超过30字符时自动添加省略号，确保表格列宽固定时的美观与阅读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图,当渲染的文字超出30字后显示省略号

1.设置过滤器

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

2.使用过滤器

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

3.ok了