elementUI-输入框内容太长超出怎么搞

最新推荐文章于 2024-02-19 09:51:15 发布

牛先森家的牛奶

最新推荐文章于 2024-02-19 09:51:15 发布

阅读量4.1k

点赞数

分类专栏： UI框架文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42681295/article/details/118730476

版权

UI框架专栏收录该内容

23 篇文章

订阅专栏

该博客介绍了如何在ElementUI中处理输入框内容过长的情况。提供了通过方法截取和过滤器两种方式实现文字超出时用'...'替代，以及通过CSS样式限制输入框内容超出后显示省略号的方法。

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

elementUI-输入框太长超出怎么搞

需求如下：
在这里插入图片描述

// methods中写个长度的方法，这里仅选中内容展示，不做其他选择下拉使用
ellipsis(value, length = 20) {
      if (!value) return "";
      if (value.length > length) {
        return value.slice(0, length) + "...";
      }
      return value;
}

意思是超出多少长度时，后面用 ... 代替即可；

当然如果不是输入框的话可以用过滤器来实现；

1、设置过滤器

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

2、使用过滤器

<el-table-column label="标题" width="150">
    <template slot-scope="scope">
       <span>{{ scope.row.title| ellipsis }}</span>
    </template>
  </el-table-column>

当然也可以使用样式限制内容超出后显示…

设置输入框宽度，然后加上下面的样式就可以；

.text-ellipsis{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}