上效果图
上代码
<!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/vue@2.6.11/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>
微信公众号【前端学馆】程序员IT编程书籍分享！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。