Vue中循环多条数据，内容过多显示展开，否则隐藏，这个展开得控制条件如何处理？

Question

Answer 1

你可以用一个对象作为映射表来存储哪些是展开的项目。每一项都有唯一id的吧？

<template>
  <div>
    <div
      v-for="data of dataList"
      :class="expandMap[data.id] ? 'expand' : 'collapse'"
      :key="data.id">
      {{ data.content }}
    </div>
  </div>
</template>

export default {
  data () {
    return {
      dataList: [],
      expandMap: {}
    }
  },
  methods: {
    expand (data) {
      this.$set(this.expandMap, data.id, 1)
    },
    collapse (data) {
      this.$delete(this.expandMap. data.id)
    }
  }
}

.collapse {
  max-height: 300px;
  overflow: hidden;
}

.expand {
  max-height: none;
}

展开/收起按钮就很简单了

Answer 2

可以css去做
确定好下限高度，用overflow就可以了

Answer 3

可以给内容的 wrap 动态绑定css样式，包含 max-height。展开按钮通过v-if控制显示隐藏，条件可以是元素的 height 也可以是内容的 string 长度阈值。按钮bind 事件操作就是动态改变 css 样式使它显示全部了。

Answer 4

假设这条详情是这样的数据

dataList:[

       {content:"我是内容"},
       {content:"我是内容我是内容我是内容我是内容我是内容我"},
       {content:"我是内容我是内容我是内容我是内容我是内容是内容内容内容"},

]

思路:

1. 首先你先写一套css作为超出隐藏的css
2. 所有的详情肯定是通过v-for来循环遍历出来的,item in dataList 这样遍历的时候你是通过item.content去拿到文字内容,那么相当于item.content.length可取到当前的文字长度,那么现在能拿到长度,
3. 通过v-if将判断每一项的item.content.length来作为条件判断,当然你想要他超出多少隐藏你来决定,比如如果长度大于

4.就切换到你事先准备好的class的类名当然这个类名是作为超出隐藏才会生效这个类名

补充: 查看更多按钮,如果判断长度大于限制长度就显示查看更多按钮,点击查看按钮就将切换class类名展开显示,你还会遇到一个问题就是你多个按钮点击的时候其他也会展开,如果后台能加字段就让后台加字段,如果不行的话可以使用set对每一项的item插入一个开关isShow的字段,这时候你每点击一个list的时候他的开关的状态都是独立的就不会互相影响到其他的list

Answer 5

1.使用数据长度进行控制：v-if="arr.length>10"
2.使用高度隐藏；设置内容高于aHeight的时候显示

Answer 6

首先不推荐用 .length 来判断
你拿到的是一个 html 的内容，不一定是 input 的纯字符集合

建议渲染之后增加一个用于标记的属性，类似：

<div
ref="`line+${index}`"
:isOver="formatOverflowStatus(`line+${index}`)">
<div v-show="formatOverflowStatus(`line+${index}`)"> 展示更多</div>

[isOver]{
....
}

1.计算模块的高低
2.对比预期的高度
3.返回状态

可能出现的问题：渲染 和 计算相互卡主，导致计算高度不符合预期
另一个办法，
1.先渲染一遍获取真实高度，但是隐藏元素的显示
2.计算元素的高度，并反馈到数据中
3.解除隐藏，并防止计算的循环调用
大约思路是这样吧 ... 建议用后面一个 ... 直接计算感觉会拿到错误的高度数据