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>