html中如何在输入框里输入条件，对表格里的数据进行查询，点击查询并显示具体信息

Question

问题遇到的现象和发生背景

这是静态页面，没有链接 数据库，表格是死的，自己放进去的

问题相关代码，请勿粘贴截图

css相关代码：
html,body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;

}
#app{
width: 100%;
height: 100%;
background-size: cover;
}
/容器/
.el-container{
width: 100%;
height: 100%;

}
/头部/
.el-header{
width: 100%;
height: 10%; !important;/提高样式的优先级/
padding: 0;
margin: 0;
border-bottom: 1px solid silver;
font-size: 30px;
text-align: center;
background-image: url("../img/image12.jpg");
}
/侧边栏/
.el-aside{
width: 25%;
height: 90%;
padding: 0;
margin: 0;
font-size: 35px;
background-color: white;
font-weight: bolder;
text-align: left;
border-right: 2px black solid;
margin-top: 20px;
}
/主体/
.el-main{
width: 75%;!important;
height: 100%;
padding: 0;
margin: 0;
text-align: left;
background-color: white;
margin-top: 20px;
}
.el-button{
width: 25%;
margin-left: 85px;
}
.el-input-number{
width: 390px;
height: 50px;
}
.el-input{
width: 390px;
height: 50px;
}
html代码：

库存管理系统 库存管理系统

账号：

等级：

库存管理 库存查询 https://ask.csdn.net/new?word=#

      <el-row>
        <el-col :span="8" style="">
          <el-form-item >
            <el-input v-model="product" placeholder="产品名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item >
            <el-input v-model="business" placeholder="生产厂商"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-button type="primary" @click="select">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>

        </el-col>
      </el-row>
    </el-form>



    <hr>

    <el-table :data="tableData" border stripe ref="tbl">

      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="product" label="产品名称"></el-table-column>
      <el-table-column prop="count" label="库存数量"></el-table-column>
      <el-table-column prop="count1" label="规格"></el-table-column>
      <el-table-column prop="address" label="产地"></el-table-column>
      <el-table-column prop="type" label="来源"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="business" label="生产厂商"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>

    </el-table>

  </el-main>
</el-container>

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

想在输入框输入查询条件，点击查询就显示该条信息，点击重置就清除输入框条件

Answer 1

let tableData = [
  { id: 1, name: '小明' }, { id: 2, name: '小明' }, { id: 3, name: '小明' }
]
tableData = tableData.filter(item => item.id === 1 && item.name === '小明')

给你举个例子，参考