1.需求:

在使用搜索功能时候,只显示搜索到的panel并且将搜索到的含有该专家的panel展开,如图
 

            

1.html,注意黄色部分,作为每个panel的key值,要唯一

<Collapse v-model="value1">
<Panel v-for="(items, index) in testPerson" :key="items.nameCode" :name="items.nameCode" ref='panels' >
<span class="marginLeftSpan">{{items.text}}</span>
<span @click="checkePersonAll($event, index)">
<img src="/static/images/Statistics/gou.png" v-if="items.checked" alt="" >
<img src="/static/images/Statistics/kuang.png" v-else alt="">
全选
</span>
<ul slot="content">
<li v-for="(item, indexa) in items.person" :key="indexa" class="everyPersonLiClass" :class="{personCheckedClass: item.checked}">
<img src="/static/images/Statistics/gou.png" v-if="item.checked" alt="" @click="checkedChangePerson(index, indexa)">
<img src="/static/images/Statistics/kuang.png" v-else alt="" @click="checkedChangePerson(index, indexa)">
<span>{{item.showName}}</span>
{{item.name}}
<span v-if="item.position != ''">——{{item.position}}</span>
</li>
</ul>
</Panel>
</Collapse>

2.搜索功能的代码

// 搜索数据
searchFuc () {
let searchValue = this.searchValue
let totalPerson = this.totalPerson
this.testPerson = []
let testPerson = []
totalPerson.map(element => {
let inner = element.person
let isSearch = false
let userArr = []
inner.map(ele => {
if (ele.name.includes(searchValue) || ele.position.includes(searchValue)) {
userArr.push(ele)
isSearch = true
}
})
if (isSearch) {
let newObj = {
checked: false,
text: element.text,
person: userArr,
code: element.code,
nameCode: element.nameCode,
}
testPerson.push(newObj)
if (searchValue.length > 0) { // 包含有搜索的字段的时候,把每个值的key给value1
this.value1.push(element.nameCode)
} else {
this.value1 = []
}
}
})
this.testPerson = testPerson
},

 

vue+ivew使用Collapse 折叠面板把全部面板展开的更多相关文章

  1. vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件

    <template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...

  2. element-ui Collapse 折叠面板源码分析整理笔记(十)

    Collapse 折叠面板源码: collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-co ...

  3. 出售Illustrator脚本插件面板(包含面板源码,以及面板上所有的功能源码)

    出售Illustrator脚本插件面板(包含面板源码,以及面板上所有的功能源码) 购买后可提供相应的小修改,以及教你使用往这个多列面里再加上按钮功能! 这套源码可作为工作使用,也可用为新手学习AI脚面 ...

  4. 关于液晶显示器的6bit面板、8bit面板及E-IPS(转)

    原文:http://bbs.3dmgame.com/thread-2232447-1-1.html              1.什么是6bit面板.8bit面板         众所周知,液晶显示器 ...

  5. Collapse 折叠面板

    通过折叠面板收纳内容区域 基础用法 可同时展开多个面板,面板之间不影响 <el-collapse v-model="activeNames" @change="ha ...

  6. 基于BootStrap的Collapse折叠(包含回显展开折叠的对应状态)

    情况描述:为了改善页面上的input框太多,采用∧∨折叠展开,这个小东西来控制,第一次做,记录一下ヾ(◍°∇°◍)ノ゙下边是Code 代码: //html代码 <div id="col ...

  7. collapse折叠

    基本: <button class="btn btn-primary" data-toggle="collapse" data-target=" ...

  8. (八)easyUI之Accordion折叠面板:动态面板

    二.动态面板 数据库设计 函数设计:该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS ...

  9. (转)elasticsearch collapse 折叠字段应用

    转自:https://elasticsearch.cn/article/132 在 Elasticsearch 5.x 有一个字段折叠(Field Collapsing,#22337)的功能非常有意思 ...

随机推荐

  1. iOS 获取音频或是视频的时间

    AVURLAsset* audioAsset =[AVURLAssetURLAssetWithURL:audioFileURL options:nil]; CMTime audioDuration = ...

  2. 常用的css解决方案

    一. css 2.x code 1. 文字换行  /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: n ...

  3. ECMAScript1.1 js书写位置 | 声明变量 | 基本数据类型 | 数据类型转换 | 操作符 | 布尔类型的隐式转换

    js书写位置 由于在写css样式时使用的时双引号,所以我们在写js代码时建议使用单引号(‘’)! 行内式 <input type="button" value="点 ...

  4. HtmlCleanner结合xpath用法(转载)

    HtmlCleaner cleaner = new HtmlCleaner(); TagNode node = cleaner.clean(new URL("http://finance.s ...

  5. Win7+Ubuntu11.10(EasyBCD硬盘安装)----转载

    Win7+Ubuntu11.10(EasyBCD硬盘安装) ubuntu 下载地址:http://mirrors.163.com/ubuntu-releases/12.04/ 1)首先还是分区,在计算 ...

  6. React:styled-components

    ``是es6的Template Literals(模版字符串),许多人对这个一知半解,今天在这边总结下: `${expression}`(表达式插补) var x; var y; sth.innerH ...

  7. 多线程中Runnable 和Thread关于synchronized的疑点

    学java时和同学碰到的一道题: 转自https://blog.csdn.net/qq_40857349/article/details/102809100 某公司组织年会,会议入场时有两个入口,在入 ...

  8. Linux CPU负载状态:%us/%sy/%ni/%id/%wa/%hi/%si/%st含义

    原文 Linux CPU负载状态:%us/%sy/%ni/%id/%wa/%hi/%si/%st含义 缙哥哥发现用了雅黑的探针,在 Linux 的 CPU 状态信息中发现,有“%us.%sy.%ni. ...

  9. Android 开发 框架系列 OkHttp文件下载功能实现(含断点续传)

    前言 此篇博客只是下载功能的记录demo,如果你还不太了解okhttp可以参考我的另一篇博客https://www.cnblogs.com/guanxinjing/p/9708575.html 代码部 ...

  10. 5.从物理层到MAC层

    第一层(物理层)     如何用两台电脑构成最小的局域网(LAN)?     网线的水晶头1.2和3.6脚分别起着收.发信号的作用,随意只要将水晶头做交叉线1-3.2-6交叉法,然后连接两台电脑.除了 ...