-
默认展开第一个
-
默认展开第二个
-
默认全部展开
-
默认全部折叠
这里的title名字是自己定义的。绑定的值为name的值。由于这是一个循环嵌套的面板,故而绑定时需要用一个数组格式来接收。
注意:name前面有冒号,说明后面是一个变量或者表达式,没加冒号就是固定的字符串
此时这里的name前面没有冒号,说明绑定的是一个固定的字符串‘index’,那么只要title中绑定的名字和name的字符串一致,就是默认展开此面板,又由于这是一个for循环的面板,故所有的面板的名字是一致的,也就是默认全部展开(注:这里仍然用的是数组格式)
默认折叠可以有很多种形式,这里采用name绑定的变量。只要title值和name值不一致,那么所有的面板就默认折叠了。
这里title绑定的是index字符串,而name绑定的是一个索引
预祝接下来的产品越做越好
<li v-for=(item,index) key=index>
<p class=p ref=liCon>{{item.content}}</p>
<div class=open click=open(item,index)>
<div v-if=!item.openFlag>【
展开
】</div>
首先检查到多次点击
展开
按钮能够取得
数据
,考虑是初始化
数据
加载的问题,通过网页搜索与请教得到一个解决办法
在
面板
组件中添加<u-
collapse
ref="
collapse
View">
在uni-app的生命周期中添加
onReady(){
setTimeout(() => {
this.$refs.
collapse
View.init();
}, 500);
如果还未
显示
,改500为1000,根据不同手机渲染dom的时间
<el-
collapse
:value="opened">
<el-
collapse
-item v-for="o in List" :key="o.aaa":name="o.aaa">
<div>XXXXXXXXXXXXXXXXXXXXXXXX</div>
</el-
collapse
-item>
</el-collaps.