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

Question

<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
  }
},

这个是收缩时候的样式
这个是展开以后的样式
现在的问题是
我只能通过一个collDisabled来控制所有的文本
如何实现互不影响的控制文本显示

Answer 1

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