Vue实现模糊搜索

搜索框
<Input
          search
          :placeholder="roleManagementVal.searchValue"
          class="headerInputg"
          v-model="selectVal"  双数据绑定
          @input="handlChange()" 输入框事件这个事件是输入值之后才会触发的
        />

搜索按钮

        <Button
          type="primary"
          style="height:100%;margin-top:-6px;width:97px;font-size:15px"
          @click="reset()" 点击事件
          >{{ roleManagementVal.search }}</Button
        >

// 清空搜索框展示数据  判断输入框是否为空如果是空展示所有数据( 也就是重新调一下查看接口 )
    handlChange() {
      if (this.selectVal == "") {
        this.getList();
        console.log(this.getList(), "清空搜索框展示数据");
      }
    },
    // 模糊搜索 点击事件
    reset() {
      if (!this.selectVal) {
        this.$message.error("请输入查询条件");
      } else {
        this.dim();
      }
    },
    // 查看接口 === 搜索接口
    
    dim() {
      let val = {
        name: this.selectVal //把搜索框的值传给后端
      };
      this.$ajax.post("/role/list", val).then(res => {
        this.roleManagementList = res.data.data; //与查看接口一致
        console.log(this.roleManagementList, "模糊搜索================");
      });
    }