快捷導(dǎo)航

vue實現(xiàn)搜索過濾效果

更新時間：2019年05月28日 09:11:54 作者：郭豪楊

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)搜索過濾效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)搜索過濾效果的具體代碼，供大家參考，具體內(nèi)容如下

html：

<table id="tfhover_1" class="tftable_1" border="1">
  <tr>
    <th>名稱</th>
    <th>鏈接狀態(tài)</th>
    <th>IP</th>
    <th>特例類型</th>
    <th>所屬城市</th>
    <th>所屬機房</th>
  </tr>
  <tr v-cloak v-for="(item, index) of slist">
    <td>{{item.name}}</td>
    <td>{{item.username}}</td>
    <td>{{item.email}}</td>
    <td>{{item.sex}}</td>
    <td>{{item.province}}</td>
    <td>{{item.hobb}}</td>
    <!--<td><a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showOverlay(index)">修改</a> | <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="del(index)">刪除</a></td>-->
  </tr>
</table>

css:

[v-cloak] {
  display: none
}
table {
  border: 1px solid #ccc;
  padding: 0;
  border-collapse: collapse;
  table-layout: fixed;
  /*margin-top: 10px;*/
  width: 100%;
  margin-top: 45px;
}
table td,
table th {
  height: 30px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 2vh;
  padding: 12px 3px 6px 8px;
  color: #666666;
  font-weight: 300;
}
table th:first-child {
  width: 4rem;
}
.container,
.st {
  /*width: 1000px;*/
  margin: 10px auto 0;
  font-size: 13px;
  font-family: '微軟雅黑'
}
.container .search {
  font-size: 15px;
  padding: 4px;
}
.container .add {
  padding: 5px 15px;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background: rgba(0, 0, 0, 0.7);
}
.overlay td:first-child {
  width: 8rem;
}
.overlay .con {
  position: absolute;
  /*width: 420px;*/
  min-height: 300px;
  background: #fff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  /*margin-top: -150px;*/
  padding: 20px;
}
 
.span_1{
  font-size: 18px;
  color: #666666;
}

js:

Vue.component('model', {
 
  template: '',
  props: ['list', 'isactive'],
  computed: {
    modifylist() {
      return this.list;
    }
  },
  methods: {
    changeActive() {
      this.$emit('change');
    },
    modify() {
      this.$emit('modify', this.modifylist);
    },
    add(){
 
    }
  }
});
 
 
var app = new Vue({
  el: '#app',
  data: {
    isActive: false,
    selected: -1,
    selectedlist: {},
    slist: [],
    searchlist: [],
    list: [
      {
        name:'Fe1',
        username: '開',
        email: '221.122.62.221',
        sex: '特例1',
        province: '北京',
        hobb:'電子機房'
      },
      {
        name:'Fe2',
        username: '關(guān)',
        email: '192.168.12.222',
        sex: '特例2',
        province: '上海',
        hobb: '服務(wù)機房'
      },
      {
        name:'Fe3',
        username: '開',
        email: '127.255.255.255',
        sex: '特例3',
        province: '重慶',
        hobb: '遙控機房'
      },
      {
        name:'Fe4',
        username: '關(guān)',
        email: '223.255.255.255',
        sex: '特例4',
        province: '北京市',
        hobb:'內(nèi)網(wǎng)機房'
      }
    ]
  },
  created() {
    this.setSlist(this.list);
  },
  methods: {
    // 修改數(shù)據(jù)
    showOverlay(index) {
      this.selected = index;
      this.selectedlist = this.list[index];
      this.changeOverlay();
    },
    // 點擊保存按鈕
    modify(arr) {
      if (this.selected > -1) {
        Vue.set(this.list, this.selected, arr);
        this.selected = -1;
      } else {
        this.list.push(arr);
      }
      this.setSlist(this.list);
 
      this.changeOverlay();
    },
 
    del(index) {
      this.list.splice(index, 1);
      this.setSlist(this.list);
    },
    changeOverlay() {
      this.isActive = !this.isActive;
    },
    // 獲取需要渲染到頁面中的數(shù)據(jù)
    setSlist(arr) {
      this.slist = JSON.parse(JSON.stringify(arr));
    },
    // 搜索
    search() {
      var v = $('.search').val(),
        self = this;
      self.searchlist = [];
      if (v) {
        var ss = [];
        // 過濾需要的數(shù)據(jù)
        this.list.forEach(function (item) {
          if (item.province.indexOf(v) > -1) {
            if (self.searchlist.indexOf(item.province) == -1) {
              self.searchlist.push(item.province);
            }
            ss.push(item);
          } else if (item.hobb.indexOf(v) > -1) {
            if (self.searchlist.indexOf(item.hobb) == -1) {
              self.searchlist.push(item.hobb);
            }
            ss.push(item);
          }
        });
        this.setSlist(ss); // 將過濾后的數(shù)據(jù)給了slist
      } else {
        // 沒有搜索內(nèi)容，則展示全部數(shù)據(jù)
        this.setSlist(this.list);
      }
    }
  },
  watch: {
  }
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: