根据输入框输入的内容筛选表格数据的两种方法

根据输入框输入的内容筛选表格数据的两种方法

加搜索按钮

<div class="search">
        <div class="searchLabel">资源名称：</div>
        <div class="searchInput">
          <el-input
            v-model.trim="name"
            @change="changeEvent"
            placeholder="请输入型号"
          ></el-input>
        </div>
        <el-button type="primary" @click="addList">新建</el-button>
        <el-button type="primary" @click="searchFn">搜索</el-button>
        <el-button type="primary" @click="resetFn">重置</el-button>
      </div>

      name: "",
      input:"",

  mounted() {
    this.getData();
  },

methods: {
    // 获取用户信息
    async getData() {
      const params = {
        currentPage: this.page.currentPage,
        size: this.page.pageSize,
        model:this.input,
      };
      const res = await getD(params);
      console.log(res, "res");
      if (res.data.code == 200) {
        this.tableData = res.data.data.records;
        this.page.totalResult = res.data.data.total;
      }
    },
    changeEvent(val){
      this.input = val;
      console.log(this.input,'this.input');
    },
    // 搜索
    searchFn(){
      this.getData();
    },
    // 重置
    resetFn() {
      this.name = "";
      this.getData();
    },
    }

无搜索按钮

 watch:{
    name(val){
    this.input = val
      this.getData(this.input);
    }
  },