vue如何实现字符长度过长时，显示省略号，展开以后全部显示？

  • Z时代
  • 2024-03-08
  • 分类：IT

<span v-show="!collDisabled">
  <span v-show="row.app.http.url.length > 20">{{ row.app.http.url.slice(0, 20) }}...</span>
  <span v-show="row.app.http.url.length < 20">{{ row.app.http.url }}</span>
</span>
<span v-show="collDisabled">{{ row.app.http.url }}</span>

通过事件判断展开和收缩

// val 是表格的每一行的id值，是一个数组
collapseChange(val) {
  console.log(val)
  if (val.length === 0) {
    this.collDisabled = false
  } else {
    this.collDisabled = true
  }
},

vue如何实现字符长度过长时，显示省略号，展开以后全部显示？这个是收缩时候的样式
vue如何实现字符长度过长时，显示省略号，展开以后全部显示？这个是展开以后的样式
现在的问题是
我只能通过一个collDisabled来控制所有的文本
如何实现互不影响的控制文本显示

回答：

把collDisabled放到数组每一个元素里，分别控制，通过row修改和获取

以上是 vue如何实现字符长度过长时，显示省略号，展开以后全部显示？ 的全部内容， 来源链接： utcz.com/p/933139.html

回到顶部