效果圖:

訪問的資料量小,一次返回所有資料,再次利用elementUI-Table 和el-pagination元件進行展示,關鍵點事資料的篩選

 官網的完整案例
 <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]" //顯示 5條/頁的值
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper" //分別對應了[共33條, 5條/頁,<.......>]
      :total="400"> //設定總條數
    </el-pagination>
  </div>
 

<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每頁 ${val} 條`);
      },
      handleCurrentChange(val) {
        console.log(`當前頁: ${val}`);
      }
    },
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      };
    }
  }
</script>　　

　demo的使用

 <el-table
                :data="list"
                style="width: 100%"
                @selection-change="selectItem">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column label="使用者名稱"  prop="userName" width="150"></el-table-column>
            <el-table-column label="
 
使用者程式碼" prop="userCode" width="150"></el-table-column>
            <el-table-column label="所屬機構程式碼" prop="comCode" width="140"></el-table-column>
            <el-table-column label="使用者描述" prop="userDescription" width="300"></el-table-column>
            <el-table-column label="使用者狀態" align="center" prop="userState" width="100">
                <template scope="scope">
                    <div>
                        <!--                        {{ scope.row.userState | userState }}-->
                        {{scope.row.userState == 0 ? "啟用" : scope.row.userState == 1 ? "禁用" : "解鎖"}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="建立時間" prop="makeDate" width="140"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template scope="scope">
                    <div>
            <span>
              <router-link :to="{ name: 'usersEdit', params: { id: scope.row.userCode }}"
                           class="btn-link edit-btn"> 編輯 </router-link>
            </span>
                        <span>
              <el-button size="small" type="danger" @click="confirmDelete(scope.row)">刪除</el-button>
            </span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="pos-rel p-t-20">
            <btnGroup :selectedData="multipleSelection" :type="'users'"></btnGroup>
            <div class="block pages">

                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        layout="total, sizes,prev, pager, next"
                        :page-sizes="[1, 5,8, 10]"
                        :page-size="limit"
                        :current-page="page"
                        :total="total">
                </el-pagination>
            </div>
        </div>

接著設定data(){ }

    data() {
      return {
          list:[],
        tableData: [],
        realname: '',
        multipleSelection: [],
        pagesize: 8,
          page:1,  //對應el-pagination current-page
          limit:5,   //和:page-size 對應
          total:null, //和:total對應
      }
    },

　請求資料

      getAllUsers() {
        this.loading = true
        const data = {
          params: {
            realname: this.realname,
            page: this.currentPage,
            rows: this.limit
          }
        }//不要了這個是按後臺分頁所需要的資料
        this.apiGet('admincrud/users', data).then((res) => {
          console.log('res = ', _g.j2s(res))
          this.handelResponse(res, (data) => {
            this.tableData = data.list
            this.dataCount = data.total
              this.pageList()
          })
        })
      },

　資料過濾

        //處理資料
        getList() {
            //es6過濾得到滿足搜尋條件的展示資料list
            // let list2 = this.data.filter((item, index) =>
            //     item.name.includes(this.tableData)
            // )
            let list=this.tableData;
            this.list = list.filter((item, index) =>
                index < this.page * this.limit && index >= this.limit * (this.page - 1)
            )
            this.total = list.length
        },

　倆個按鈕事件的處理函式

        // 當每頁數量改變
        handleSizeChange(val) {
            console.log(`每頁 ${val} 條`);
            this.limit = val
            this.getList()
        },
        // 噹噹前頁改變
        handleCurrentChange(val) {
            console.log(`當前頁: ${val}`);
            this.page = val
            this.getList()
        },

　　這裡主要參考了文章:https://blog.csdn.net/weixin_43216105/article/details/90043828?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

vue+element實現前端分頁及前端搜尋功能

主要他的這個搜尋過濾挺好的簡單不要重新訪問後臺,我自己沒時間改了,現在把思路過程放這裡

                </el-col>
            <el-col :span="2">
                <el-button type="success" @click="search">搜尋</el-button>
            </el-col>


  // 搜尋過濾資料,
            search() {
                this.page = 1
                this.getList()
            }


            getList() {
                // es6過濾得到滿足搜尋條件的展示資料list
                let list = this.data.filter((item, index) =>
                    item.name.includes(this.searchData)
                )
                this.list = list.filter((item, index) =>
                    index < this.page * this.limit && index >= this.limit * (this.page - 1)
                )
                this.total = list.length
            },

atzhang