关于javascript:js数组对象模糊查询

41次阅读

共计 1565 个字符，预计需要花费 4 分钟才能阅读完成。

<!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>

正文完