vue中搜索框根据关键字筛选

根据select框选中的值,和搜索框中的值进行筛选判断

<iframe width='100%' height='500px' src="//player.bilibili.com/player.html?aid=972816205&bvid=BV1hp4y1b72G&cid=329063907&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

//获取表格数据的方法
async getTableList() {
      this.loading3 = true
      const { data: res } = await Axios.get('http://192.168.3.68:9090/system/info/list', {
        params: this.queryInfo
      })
      this.loading3 = false
      if (res.code !== 200) {
        return this.$message.error('获取用户列表失败!')
      }
     
     //这步必须写在筛选之前
     this.tableData = res.rows
     this.total = res.tota
     
      //select框筛选
      let { companyName, houseNum, searchValue } = this.queryInfo
      // 两个select都有值
      if (houseNum && companyName) {
        console.log('两者都有值')
        this.tableData = res.rows.filter((item) => {
          let company = item.companyName
          let house = item.housenum
          return company.includes(this.v1) && house.includes(this.v3)
        })
      }

      //小区名有值
      if (companyName && !houseNum) {
        this.tableData = res.rows.filter((item) => {
          let company = item.companyName
          return company.includes(this.v1)
        })
      }
     
      //房间号有值
      if (houseNum && !companyName) {
        this.tableData = res.rows.filter((item) => {
          let house = item.housenum
          return house.includes(this.v3)
        })
      }

      //搜索框筛选
      if (searchValue) {
        this.tableData = res.rows.filter((item) => {
          return item.ownerdisname.includes(searchValue)
        })
      }
     
    },
<el-select 
    v-model='queryInfo.companyName'
    placeholder='请选择小区名'
    :class="'colorChange iconRight'"
    @change='companyClick'>
    <el-option v-for='(item, index) in value1' :value='item'></el-option>
</el-select>

<el-select 
    v-model='queryInfo.houseNum' 
    placeholder='请选择房间号'
    :class="'colorChange iconRight'"
    @change='houseClick'>
    <el-option v-for='(item, index) in value3' :value='item'></el-option>
</el-select>

<!-- 搜索框  -->
<el-input
     clearable placeholder='请输入业主姓名'
     v-model='queryInfo.searchValue'
     @clear='getTableList'
     @keyup.enter.native="getTableList">
     <el-button 
        slot='append' 
        icon='el-icon-search'
        @click='getTableList'>搜索</el-button>
</el-input>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容