Vue限制文本框显示字数,多余用...代替

吃不胖爹

于 2024-04-01 13:29:35 发布

阅读量380

点赞数 2

分类专栏： js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43894292/article/details/137229552

版权

js 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中创建并使用自定义的filterAmount过滤器，用于控制字符串长度，以达到在el-table列中显示藏品和创作者故事时不超过指定字数的效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述
1.在filters.js封装过滤器方法

import Vue from 'vue'
 
//设置只显示几个字符串，默认20个
Vue.filter('filterAmount', function(value, n) {
		if(!n) n = 20;
		if(value && value.length > n) {
			value = value.substring(0, n) + '...';
		}
		return value;
	}
)

2.在main.js引用过滤器

//引用过滤器
import './filters.js'

3.在需要控制字数的地方使用此过滤器

<el-table-column
  prop="description"
  label="藏品故事"
  align="center"
  width="150"
 >
  <template slot-scope="scope">
    <div :title="scope.row.description">
       {{ scope.row.description | filterAmount(10) }}
    </div>
  </template>
</el-table-column>
<el-table-column
  prop="introductionUser"
  label="创作者故事"
  align="center"
  width="150"
>
  <template slot-scope="scope">
    <div :title="scope.row.introductionUser">
    {{ scope.row.introductionUser | filterAmount(10) }}
    </div>
  </template>
</el-table-column>