Vue实现模糊搜索

有时百感交集，却又百口模辩，那些很远的事，仿佛就在昨天

模糊搜索！ 模糊搜索！！ 模糊搜索！！！调取后端搜索接口

Hello大家好小白一枚，有写的不好的地方请多多指教

话不多说

 

 

 结构

搜索框
<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; //与查看接口一致 这步是不能少的
        //如果有分页,调一下分页方法
　　　　  this.分页方法(),
        console.log(this.roleManagementList, "模糊搜索================");
      });
    }