记录下来使用方法:
效果图:
代码如下:
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使面板能同时打开多个(默认是若打开一个后再打开另一个 则原来的会被折叠)