无需经过请求接口实现搜索功能（前提是后端把数据给你，并且给你的是所有的数据）

无需经过请求接口实现搜索功能（前提是后端把数据给你，并且给你的是所有的数据）

虽然没什么用，还是写写吧

开启项目

html部分

  <div class="aaa">
    <el-input placeholder="请输入用户名" v-model="form.name"></el-input>
    <el-button @click="search()">搜索</el-button>
    <div>
      <div class="checkbox_list" v-if="lists.length !== 0 && lists">
        <ul>
          <li v-for="item in lists" :key="item.userId">{{ item.userName }}</li>
        </ul>
      </div>
      <div v-else>
        <p>
          {{ tips }}
        </p>
      </div>
    </div>
  </div>

data部分

  data() {
    return {
      tips: '',
      form: {
        name: '',
      },
      lists: [],
      listss: [],
    }
  },

函数–created 部分

  methods: {
    search() {
      var name = this.form.name
      var arr = this.listss
      var uio = []
      if (name == '') {
        this.lists = this.listss
      } else {
        for (let i = 0; i < arr.length; i++) {
          var str = ''
          str = arr[i].userName
          if (str.match(name)) {
            uio.push(arr[i])
          }
        }
        this.lists = uio
        if (this.lists.length == 0) {
          this.tips =
            '抱歉，无法搜索到有关“ ' + this.form.name + '”这个人的信息'
        }
      }
    },
  },

搜索前

搜索后