其他分享
首页 > 其他分享> > element ui table+分页 筛选全部数据

element ui table+分页 筛选全部数据

作者:互联网

 

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>

 

标签:return,list,element,length,blist,ui,table,total,data
来源: https://www.cnblogs.com/cherylgi/p/13572445.html