Vue中实现搜索功能（树形和列表）：

1、树形搜索：

数据格式：
data:[
	{name：'...',age:'...',},
	{
		name：'...',
		age:'...',
		vList:{
			name：'...',
			age:'...',
			vList:{
				name：'...',
				age:'...',
			}
		}
	},
	{name：'...',age:'...',},
}

后端接口：

POST 	/menueList
参数：
searchName   searchName

前端处理接口：

export function menueList (obj) {
  return request({
    url:'/api/menueList',
    method: 'post',
    params: obj
  })
}

前端页面：

 <div class="treebox">
            <!-- 新增搜索功能 -->
            <div class="searchInput">
              <el-input
                type="text"
                placeholder="请输入设备名称搜索"
                class="inputClass"
                v-model="searchName"
                @input="searchVideo"
              ></el-input>
            </div>

            <div style="padding:5px 40px;">
              <el-tree
                :data="treeData"
                ref="tree"
                default-expand-all   //让文件展开
              >
              </el-tree>
            </div>
          </div>

export default {
	methods：{
		searchVideo(val) {//搜索功能
      		menueList({searchName:val}).then(res => {
         		const { data } = res.data;
         		this.treeData = [data];
     		})
     }
}

2、列表搜索：

后端接口：

查询详情 
GET     		/check/{id}

参数名称    		请求类型
id      		path

前端处理接口：

export function getCheck(params){
	return request({
		url:'/api/check/{id}',
		method:'get',
		params
	})
}

前端页面：

<el-form size="small" @kayup.enter.native="getList()">
	<el-form-item>
		<el-input placeholder="请输入名称搜索" clearable v-model="dataForm.search"></el-input >
	</el-form-item>
	<el-form-item>
		<el-button type="primary" @click="getList">搜索</el-button>
	</el-form-item>
</el-form>

import {getCheck} from "@/api/..."
methods:{
	getList(val){//搜索功能
		if(!this.dataFrom.search){
			this.$message.wraning("请输入搜索的内容")
			return
		}
		let params={//把需要传的参数传给后端
			id:this.dataFrom.id,
			param:this.dataFrom.search.toString(),
			pageNum:this.dataFrom.current,
			pageSize:this.dataFrom.size,
		}
		//  let params={...this.dataFrom}
		getCheck(params).then((res)=>{
			if(res.data.code==0){
				this.$message.success('搜索成功')
			}
			this.getDataList()  //重新调用列表数据
		})
	}
}

3、模糊搜索：

template:
	<el-input type="text" style="margin:10px;width:80%;"
		 v-model="videoName" @input="searchVideo"
         placeholder="输入设备名称搜索">
    </el-input>
    <ul>
        <li
           draggable="true"
           title="item.dwmc"
           :key="index"
           @dragstart="drapStart(item,index)"
           @click="getVideoUrl(item,index)"
           :class="{ztColor:spanIndex.indexOf(index) > -1}"
           v-for="(item,index) in videoList"
           >
        </li>
   </ul>

data:
	videoList: [],
    allList: [],
	
methods:
	init(){
		videoObj().then(res => {
          //this.videoList = res.data.data;
          this.allList = res.data.data;
          this.videoList = [...this.allList]
        })
	},
    searchVideo(val) {
        if (val == '') {
          this.videoList = this.allList;
          return
        }
        let ary = [];
        this.videoList.filter(item => {
          if (item.dwmc.indexOf(val) != -1) {
            ary.push(item)
            console.log(ary);
          }
        })
        this.videoList = ary;
        console.log(this.videoList);
      },