for循环使用element的折叠面板遇到的问题-2

需求：每次添加一个折叠面板时，让最新的折叠面板展开，其余的关闭

动态控制展开折叠面板，首先绑定name，v-model = activeName

我们的项目中是当添加折叠面板时，直接push进这个数组collapseData，循环这个数组新建折叠面板

<el-collapse accordion v-model="activeName">       <el-collapse-item v-for="(item,index) in collapseData" :key="index" :name="index">         <template slot="title">           {{item.name}}           <i class="ssf ssf-colse"  @click.stop="close(item,index)"></i>               <!-- 因为项目需要要在每个折叠面板右侧添加关闭按钮，这样用定位放在右侧即可 -->         </template>         <div>{{item.content}}</div>       </el-collapse-item>     </el-collapse>

需求是点击新建的时候，最新建的折叠面板展开，其余的折叠面板关闭，就需要用到activeName这个变量，当绑定的name等于activeName时即可

 methods: {
    add() {
      this.collapseData.push({
        name: "王",
        checked: false
      });
      this.activeName = Number(this.collapseData.length) - 1; //每次的activeName都等于数组的最大的值
    }
  }

 

标签：activeName,name,collapseData,折叠,element,数组,面板
来源： https://www.cnblogs.com/yanyanliu/p/12006491.html