30) { return value.slice(0, 30) + "..."; } return value; ..._vue+elementui 实现文本超出长度显示省略号 el-select">
当前位置:   article > 正文

vue+elementUI当渲染文本超出一定字数时显示省略号_vue+elementui 实现文本超出长度显示省略号 el-select

vue+elementui 实现文本超出长度显示省略号 el-select


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

1.设置过滤器

filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    }
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2.使用过滤器

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

3.ok了

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/91665
推荐阅读
相关标签
  

闽ICP备14008679号