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

• Z时代
• 2024-01-10
• 分类：技术分享

回答

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

你可以用一个对象作为映射表来存储哪些是展开的项目。每一项都有唯一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;
}

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

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

以上是 Vue中循环多条数据，内容过多显示展开，否则隐藏，这个展开得控制条件如何处理？ 的全部内容， 来源链接： utcz.com/a/24894.html