折叠状态

展开状态

代码

<el-card class="box-card" :body-style="elcardbody">
      <div slot="header" class="clearfix"><span>国家</span></div>
        <p v-show="isOpenCountry || index < max" v-for="(item, index) in list" :key="index" >
            <span :style="cardspanleft">{{ item.label }}</span><span :style="cardspanright">{{ item.value }}</span>
        </p>
        <p :style="arrow">
        <i v-show="!isOpenCountry && list.length > max" @click="isOpenCountry = !isOpenCountry" class="el-icon-arrow-down" ></i>
        <i v-show="isOpenCountry && list.length > max" @click="isOpenCountry = !isOpenCountry" class="el-icon-arrow-up"></i>
        </p>
</el-card>

使用v-show控制元素的展示
1、设置展开状态isOpenCountry和折叠显示最大数目，如果展开或者条目的index未超过max，v-show为true，页面显示该条目，逻辑为：
不展开，条目数小于max，显示全部条目
不展开，条目数大于max，显示条目index小于max的条目
开展，或条件后面的语句不用看，全部显示即可
2、@click切换isOpenCountry的值，切换按钮同样使用v-show控制，逻辑为：
不展开，并且条目数大于max，显示展开按钮
展开，条目数大于max，显示折叠按钮
条目数不足max 不显示按钮