关于前端:element中table数据全部数据进行筛选

1、@filter-change 要写在 table 根元素，也就是 <el-table @filter-change="filterChange"></el-table>
2、须要筛选的项，要写上 :column-key="' aaa' "
3、要搜寻全局，就要去掉对应筛选项的 :filter-method="xx"。

<template>
    <div class="app-container">
        <div class="button-interval">
            <el-row>
                <el-input v-model="search" placeholder="请输出搜寻内容......"
                          class="search-input"
                          @keyup.enter.native="fliterData"/>
            </el-row>
        </div>

        <el-table
                v-loading="listLoading"
                ref="myTable"
                :data="blist | dataslice(listQuery.page, listQuery.limit)"
                element-loading-text="拼命加载中......"
                border
                fit
                highlight-current-row
                @filter-change="fliterChange"
        >
            <el-table-column align="center" label="ID" prop="id" v-if="false"/>
            <el-table-column align="center" label="主机 IP" prop="ip"/>
            <el-table-column align="center" label="主机名" prop="hostname"/>
            <el-table-column align="center" label="主机类型" prop="hosttype"
                             :filters="hosttype_filters" filter-placement="bottom-end"
                             column-key="hosttype" :filter-multiple="false"/>
           <!--
        ......
        -->

            <el-table-column align="center" label="创立工夫" prop="create_time" sortable/>
            <el-table-column align="center" label="更新工夫" prop="update_time" sortable/>
        </el-table>

        <!-- 前端分页  -->
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.limit"
        />


    </div>


</template>

<script>
  import {queryHost} from '@/api/hostmanage'
  import Pagination from '@/components/Pagination'


  export default {
    name: 'HostList',
    components: {Pagination},
    filters: {dataslice(array, page, limit) {const offset = (page - 1) * limit
        const newdata = (offset + limit >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + limit)
        return newdata
      }
    },
    data() {
      return {list: [],
        blist: [],
        listLoading: true,
        total: 0,
        search: undefined,
        listQuery: {
          page: 1,
          limit: 10,
        },
        hosttype_filters: [{text: '代理服务器', value: '代理服务器'}, {text: '一般服务器', value: '一般服务器'}],

      }
    },
    watch: {search: function () {this.fliterData()
      }
    },
    created() {this.fetchData();
    },
    methods: {
      // 异步表格获取数据
      fetchData() {
        this.listLoading = true
        queryHost().then(response => {
          this.list = response.data
          this.blist = response.data
          this.listLoading = false
          this.total = response.data.length
        })
      },
      fliterData() {
        const search = this.search
        if (search) {
          this.blist = this.list.filter(data => {return Object.keys(data).some(key => {return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
          this.total = this.blist.length
          return this.blist
        }
        this.blist = this.list
        this.total = this.blist.length
        return this.list
      },
      fliterChange(filters){
        const filterskey = filters.hosttype
        console.log(filterskey)
        if (filterskey.length>0) {
          this.blist = this.list.filter(data => {return Object.keys(data).some(key => {return data['hosttype'] ===filterskey[0]
            })
          })
          this.total = this.blist.length
          return this.blist
        }
        this.blist = this.list
        this.total = this.blist.length
        return this.list
      }
    }
  }

</script>