element ui table+分頁 篩選全部數據

 

1. @filter-change 要寫在table根元素，也就是<el-table @filter-change="filterChange"></el-table>

2. 需要篩選的項，要寫上 :column-key=" ' aaa ' " 

3. 要搜索全局，就要去掉對應篩選項的 :filter-method="xx"。 

ps:   filter-method 篩選當前頁面，不會請求后端接口，條數多的話，會造成死循環

demo如下

<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>