首页 > 其他 > 详细

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

时间:2019-12-08 18:28:49      阅读:283      评论:0      收藏:0      [点我收藏+]

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

动态控制展开折叠面板,首先绑定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都等于数组的最大的值
    }
  }

 

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

原文:https://www.cnblogs.com/yanyanliu/p/12006491.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!