实现目标：在输入框中输入相关字符，列表会模糊查询与其有关的信息。

实现效果：

后端的swagger中：

 api的js文件中：

// 根据名称模糊查询
export function selectByName(param) {
    return request({
        url: "/xxxx/selectByName",
        method: "get",
        params: {
            name: param
        }
    });
}

vue文件中：

template中：

<div class="search-box">
            <el-input
              placeholder="请输入名称"
              v-model="inputVal"
              clearable
              size="small"
            ></el-input>
            <el-button
              icon="el-icon-search"
              type="primary"
              size="small"
              @click="searchData(true)"
              style="margin: 0 10px 0 10px; height: 30px"
            ></el-button>
 </div>

data中：

inputVal: "", // 输入框的输入值
monitorData: [], // 整个表数据
total: 0, // 总条数，分页时有用

watch中：设置监听，当输入框中的值改变时会实时的查询相应表数据（点击查询按钮也可以）

watch: {
      inputVal(newValue) {
      if (newValue) {
        this.searchData(true);
      } else {
        this.searchData(false);
      }
    },
  },

methods中：

// 右上角搜索框
    searchData(bool) {
      this.currentPage = 1;
      if (bool) {
        let paramName = this.inputVal;
        selectByName(paramName).then((res) => {
          this.monitorData = res.data.data;
          this.total = res.data.data.length;
        });
      } else {
        this.refreshData(); // 更新表
      }
    },