<template>
<div>
<el-input v-model="value" placeholder="请输入内容"></el-input>
<el-button @click="handleQuery"> 查询</el-button>
<el-tree :data="dataTreeList" :props="defaultProps" :default-expand-all="true"></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
value: "",
data: [
{
id: 1,
label: "一级 1",
level: 1,
parentId: null,
children: [
{
id: 4,
label: "二级 1-1",
level: 2,
parentId: 1,
children: [
{
id: 9,
label: "三级 1-1-1",
level: 3,
parentId: 4,
children: [
{
id: 11,
label: "四级 1-1-1-1",
level: 4,
parentId: 9,
},
{
id: 12,
label: "四级 1-1-1-2",
level: 4,
parentId: 9,
children: [
{
id: 13,
label: "五级 1-1-1-1-1",
level: 5,
parentId: 12,
},
{
id: 14,
label: "五级 1-1-1-1-2",
level: 5,
parentId: 12,
children: [
{
id: 15,
label: "六级 1-1-1-1-1-1",
level: 6,
parentId: 14,
},
{
id:
ES6 VUE 根据输入内容过滤树结构
于 2023-06-26 13:17:32 首次发布
本文介绍了如何利用ES6的特性及Vue.js的响应式原理,结合数据绑定和计算属性,实现在输入框输入内容时动态过滤树形结构数据,提升前端交互体验。
摘要由CSDN通过智能技术生成