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, "模糊搜索================");
      });
    }