折叠面模糊搜索功能

<template>
  <div>
    <div>
      <Input v-model="searchDataWord" placeholder="请输入搜索字段" clearable />
    </div>
    <Collapse simple>
      <Panel name="1">
        维度数据
        <p slot="content">
          <span
            v-for="(value, key) in searchData.a"
            class="spanbox"
            :key="key"
            :title="value"
            >{{ value.name }}</span
          >
          <span class="spanbox" v-if="searchData.a.length == 0">暂无数据</span>
        </p>
      </Panel>
      <Panel name="2">
        指标数据
        <p slot="content">
          <span
            v-for="(value, key) in searchData.b"
            class="spanbox"
            :key="key"
            :title="value"
            >{{ value.name }}</span
          >
          <span class="spanbox" v-if="searchData.b.length == 0">暂无数据</span>
        </p>
      </Panel>
    </Collapse>
  </div>
</template>

<script>
export default {
  components: {},
  name: '',
  data() {
    return {
      timer1: null,
      searchDataWord: '',
      searchDataCopy: {},
      searchData: {
        a: [
          { name: '店铺A', column: 'name' },
          { name: '店铺B', column: 'name' },
          { name: '店铺C', column: 'name' },
          { name: '店铺D', column: 'name' },
        ],
        b: [
          { name: '日顾客量', column: 'dayOrderNum' },
          { name: '周顾客量', column: 'weekOrderNum' },
          { name: '月顾客量', column: 'monthOrderNum' },
          { name: '日营业额', column: 'dayTurnover' },
          { name: '周营业额', column: 'weekTurnover' },
          { name: '月营业额', column: 'monthTurnover' },
        ],
      },
    }
  },
  created() {
    // 搜索字段清空后展示数据
    this.searchDataCopy = JSON.parse(JSON.stringify(this.searchData))
  },
  methods: {},
  computed: {},
  watch: {
    //树结构搜索字段变化
    searchDataWord() {
      if (this.timer1) {
        clearTimeout(this.timer1)
      }
      if (!this.searchDataWord) {
        this.searchData.a = this.searchDataCopy.a
        this.searchData.b = this.searchDataCopy.b
        this.searchData.c = this.searchDataCopy.c
      }
      this.timer1 = setTimeout(() => {
        const result1 = []
        const result2 = []
        for (let i1 = 0; i1 < this.searchData.a.length; i1++) {
          var storeA1 = this.searchData.a[i1]
          //判断输入框中的值是否可以匹配到数据，如匹配成功
          if (storeA1.name.search(this.searchDataWord) != -1) {
            //向空数组中添加数据
            result1.push(this.searchData.a[i1])
          }
        }
        this.searchData.a = result1
        for (let i2 = 0; i2 < this.searchData.b.length; i2++) {
          var storeA2 = this.searchData.b[i2]
          if (storeA2.name.search(this.searchDataWord) != -1) {
            result2.push(this.searchData.b[i2])
          }
        }
        this.searchData.b = result2
      }, 100)
    },
  },
  filters: {},
}
</script>

<style scoped lang="less">
.spanbox {
  display: block;
  text-align: left;
  padding: 5px 0px 5px 30px;
  box-sizing: border-box;
}
</style>