Vue实现数据超过三条展开收起功能_vue 组件el-cascader超过三个选项之后才开始折叠展示tag

Vue 实现数据超过三条展开收起功能

项目描述

技术实现

1. 在data里添加字段控制展示收起的展示

   data(){
       return{
            showDisplay :false,//控制展示收起
       }
   }
   1
   2
   3
   4
   5

2. 在computed里做数据处理

   computed:{
        testList() {
        // 当数据不需要完全显示的时候
        if(this.showDisplay == false){          
          let testList = []; // 定义一个空数组
          // 先显示前三个
          if(this.addressList.length > 3){　　　　　　　
            for(var i = 0;i < 3;i++){
              testList.push(this.addressList[i])
          }
          }else{
                testList = this.addressList;
          }
            return testList; // 返回当前数组
          }
        else{//展示全部数据
          return this.addressList;
        }
    },
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

3. 页面渲染

   <div @click="showDisplay = !showDisplay" v-if="addressList.length>3" class="showMore">
        <span>
            {{!showDisplay?"展开":"收起"}}
        </span>
        <img :src="showDisplay?require('./assets/upArrow.png'):require('./assets/downArrow.png')" alt="">
    </div>
   1
   2
   3
   4
   5
   6