搜索框组合筛选(两种方法)

最新推荐文章于 2024-07-19 10:30:06 发布

竹秋…

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量185

点赞数 3

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_46112174/article/details/139067356

版权

！！！！！！！！！！！！注意把原数组备份！！！！！！！！！！！

1.函数式

<el-form label-width="80px" class="filterForm" :model="filters" @submit.native.prevent>
      <el-form-item label="名称">
        <el-select v-model="filters.name" placeholder="名称" @change="checkboxChange" clearable>
          <el-option v-for="(item, index) in nameList" :label="item" :value="item" :key="index">
          </eloption>
        </el-select>
      </el-form-item>
      <el-form-item label="地址">
        <el-select v-model="filters.host" placeholder="主机地址" @change="checkboxChange" clearable>
          <el-option v-for="(item, index) in HostList" :label="item" :value="item" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="filters.slot_type" placeholder="类型" @change="checkboxChange" clearable>
          <el-option v-for="(item, index) in TypeList" :label="item" :value="item" :key="index"></el-option>
        </el-select>
      </el-form-item>
</el-form>

el-table要绑定一个 :data="computedSlotList"

<script>
    computed: {
          computedSlotList: function() {
            return this.filterTotalArray
          }
        },
    //搜索
      checkboxChange() {
        this.showList()
      },
      showList() {
        console.log( this.filters );
        let arr = this.slotList;
        console.log( arr );
        arr = arr.filter( item => {
          return Object.keys( this.filters ).every( key => {
            if ( this.filters[ key ] !== "" && item[ key ].indexOf( this.filters[ key ] ) === -1 ) {
              return false;
            }
            return true;
          } );
        } );

        console.log( arr );
        this.filterTotalArray = arr;
      },
      filterFunc( val, target, filterArr ) {
        console.log( val );
        // 参数不存在或为空时，就相当于查询全部
        if ( val == undefined || val == '' ) return filterArr
        return filterArr.filter( item => {
          console.log( item );
          return item[ target ].indexOf( val ) > -1
        } )
      },
</script>

2.第二种

showList() {
        let temp = JSON.parse( JSON.stringify(this.slotList) )
        let filteredArray = temp.filter( item => {
        const matchCluter = !this.filters.name || item.name.includes(this.filters.name ) 		
        const matchHost = !this.filters.host || item.host.includes( this.filters.host )
        const matchType = !this.filters.slot_type || item.slot_type.includes( this.filters.slot_type )
        const matchTwo = ( matchCluter && matchHost ) || ( matchHost && matchType ) || ( matchCluter && matchType )
          return matchCluter && matchHost && matchType && matchTwo
        } )
        this.filterTotalArray = filteredArray;
      },