上效果图
上代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- 引入款式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style type="text/css"> .flex { display: flex; } .flex .item{ width: 300px; } </style></head><body> <div id="app"> <el-form :inline="true"> <el-form-item> <el-input v-model="input" placeholder="请输出内容"></el-input> </el-form-item> <el-form-item> <el-button @click="search">搜寻</el-button> </el-form-item> </el-form> <div class="flex"> <div class="item"> <h2>源数组对象</h2> <pre v-html="arr"></pre> </div> <div class="item"> <h2>搜寻后果：</h2> <pre v-html="result"></pre> </div> </div> </div></body><!-- 先引入 Vue --><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script> new Vue({ el: '#app', data() { return { input: '', result: '', arr: [ { title: 'JavaScript', children: [ { title: '来开黑啦', children: [] }, { title: '那个区', children: [ { title: '无畏先锋', children: [] } ] } ] }, { title: '费雷尔卓德怎么样', children: [ { title: '能够的', children: [] } ] }, { title: '好点卡', children: [ { title: '卡啦', children: [] } ] }, { title: '电脑配置不行', children: [] }, { title: '换一个', children: [ { title: '已上线', children: [] } ] } ] } }, mounted() { }, methods: { handleData(arr, val){ let newArr =[] arr.forEach(item => { if (item.children && item.children.length) { let children = this.handleData(item.children, val) let obj = { ...item, children } if (children && children.length) { newArr.push(obj) } else if (item.title.includes(val)) { newArr.push({ ...item }) } } else { if (item.title.includes(val)) { newArr.push(item) } } }) return newArr }, search() { this.result = this.handleData(this.arr, this.input) }, } })</script></html>