vuetify第三方插件中v-expansion-panels中使用multiple,扩展面板功能。

记录下来使用方法:
效果图:
在这里插入图片描述

代码如下:
v-model绑定的是一个数组 其中 数组的下标即为展开的扩展面板项的下标(下标从0开始)

<v-expansion-panels multiple v-model="panelOpen">
    <v-expansion-panel v-for="project in projects" :key="project.title">
         <!-- 头部面板展开项-->
        <v-expansion-panel-header>{{project.title}}</v-expansion-panel-header>
           <!-- 面板展开内容项-->
        <v-expansion-panel-content>
            <div class="font-weight-bold">{{project.status}}</div>
        </v-expansion-panel-content>
    </v-expansion-panel>
</v-expansion-panels>
<script>
export default {
    data()
    {
        return {
           panelOpen:[],
            projects:[
                {title:"标题3",person:"陈涛",weather:"晴",status:"Great",lorem:"  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur minima quis impedit cum nemo suscipit ratione repellendus voluptatibus commodi, explicabo dolore aliquid quod autem eius voluptate mollitia? Quod, sequi minima!"},
                {title:"标题2",person:"张涛",weather:"暴雨",status:"Relax",lorem:"  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur minima quis impedit cum nemo suscipit ratione repellendus voluptatibus commodi, explicabo dolore aliquid quod autem eius voluptate mollitia? Quod, sequi minima!"},
                {title:"标题1",person:"王涛",weather:"小雨",status:"Angry",lorem:"  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur minima quis impedit cum nemo suscipit ratione repellendus voluptatibus commodi, explicabo dolore aliquid quod autem eius voluptate mollitia? Quod, sequi minima!"},
                {title:"标题4",person:"李涛",weather:"阴",status:"Great",lorem:"  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur minima quis impedit cum nemo suscipit ratione repellendus voluptatibus commodi, explicabo dolore aliquid quod autem eius voluptate mollitia? Quod, sequi minima!"},
                {title:"标题5",person:"陈涛",weather:"晴",status:"Great",lorem:"  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur minima quis impedit cum nemo suscipit ratione repellendus voluptatibus commodi, explicabo dolore aliquid quod autem eius voluptate mollitia? Quod, sequi minima!"}

            ]
        }
    }
}
</script>

multiple:允许多个选择。值属性必须是数组。
添加multiple使面板能同时打开多个(默认是若打开一个后再打开另一个 则原来的会被折叠)

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值