vue 超过规定行折叠收起

原创

已于 2024-06-07 15:51:36 修改 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2022-10-28 14:28:20 首次发布

offsetLeft是离其最近的已经定位的元素，如果没有就相对于body元素计算，所以要给所折叠的父元素添加相对定位position:relative;

根据子元素offsetLeft值为0的数量来判断是否超过指定行来收起和展开

<template>
  <div class="container">
    <div style="display: flex;flex-wrap: wrap;position:relative">
      <span v-for="item in showData" class="tag">
        测试数据({
  
  {item})
      </span>
    </div>
    <div v-if="float==1" @click="open()">
      展开
    </div>
    <div v-if="float==2" @click="hide()">
      收起
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        yuanData: [], //存储原数据
        showData: [], //存储展示数据
        float: null, //是否超过规定行数，1 展开 2 收起
        rowIndex: 3, //默认显示几行
        splieIndex:0,//截取数组的位置
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        for(let i