VUE + ElementUi 表格实现单元格内容显示固定字数且超出省略号显示

昨夜太平长安888

于 2020-11-06 15:22:31 发布

阅读量7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Element-UI Vue 文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/HelloWord176/article/details/109532030

Vue 同时被 2 个专栏收录

59 篇文章

订阅专栏

Element-UI

14 篇文章

订阅专栏

本文介绍了一种使用 formatter 属性来格式化表格单元格内容的方法，当单元格内容过长时，仅显示前四个字符并以省略号结尾。

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

在项目中我可能会遇到表格单元格内容过多的问题，那么如何将该列单元格格式化，只让它显示几个字呢？就像这样。。

我们可以给当前单元格设置 :formatter 属性，

用来格式化内容

Function(row, column, cellValue, index)

<el-table-column prop="messageContent" label="发布内容" width="300" :formatter="stateFormat"></el-table-column>

在methods中写该方法：

    // 格式化表格消息内容
    stateFormat(row, column, cellValue) {
      // console.log(row , column , cellValue)
      if (!cellValue) return "";
      if (cellValue.length > 4) {
        //最长固定显示4个字符
        return cellValue.slice(0, 4) + "...";
      }
      return cellValue;
    },