代码展示:

  • 默认展开第一个
  • 默认展开第二个
  • 默认全部展开
  • 默认全部折叠

这里的title名字是自己定义的。绑定的值为name的值。由于这是一个循环嵌套的面板,故而绑定时需要用一个数组格式来接收。

注意:name前面有冒号,说明后面是一个变量或者表达式,没加冒号就是固定的字符串

  • 给title声明变量,并默认第一个面板展开
    在这里插入图片描述

  • 默认第二个面板展开
    在这里插入图片描述

  • 由于面板采用了for循环,故此时如果title中绑定的不是一个数组,则会报错:
    在这里插入图片描述
    在这里插入图片描述

  • 默认全部展开

此时这里的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.
vue 的树形控件 el-tree 可以用来方便地实现树形控件,但是官方文档中,关于控件的 默认 展开 只有 默认 展开 全部或者 默认 全部关闭,如下所示: 对于指定节点的 展开 ,需要指定其id,从而通过 default-expanded-keys 设置 默认 展开 的节点。 对于后台返回的 数据 默认 展开 其第一层的第一个,其实很简单:对于获取到的后台 数据 ,将其第一层节点添加到数组中,将 default-expanded-keys 绑定数组,从而设置 默认 展开 的节点。 实际应用: 默认 展开 第一层节点中的第一个节点:
<el- collapse v-model="activeNames" @change="handleChange"> <el- collapse -item title="一致性 Consistency" name="1"> <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div> <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div&
u- collapse -itemopen属性 默认 为单个 数据 ,直接 使用 :open=“index”,会使 面板 变成手风琴效果 即使accordion为false 也是一样,需要保存 折叠 面板 索引为数组,再 判断 :open="current.indexOf(i) > -1", 是否 在数组中 changeBox(obj,index){ changeBox(obj,index){ // 查...