Two days ago, I met a third party interface in my work. They did not do paging and query. In view of the small amount of data returned by the interface, I wanted to try to achieve paging query in the front end. Directly on the Element+ VUe2.0 code.
code
<template> <div id='list'> <el-row type="flex" justify="end"> <el-col :span="2"> <div class="title">{{listTitle + "Management"}} < / div > < / el - col > < el - col: span = "14" > < / el - col > < el - col: span = "6" > < el - input placeholder = "please enter the search content" v-model="search_data" class="input-with-select" @keyup.enter.native="search"> <el-button slot="append" style="width: 30px; padding: 0 "icon =" el - icon - search "@ click =" search "> < / el - button > < / el - input > < / el - col > < el - col: span =" 3 ": offset =" 0.5 "> < el - button @click="handleAdd" type="primary" size="small">{{" new "+ listTitle}}</el-button> </el-col> </el-row> <el-row style="margin-top: 8px;" > <el-table v-loading="tableLoading" :data="paginationData" border style="width: 100%"> <el-table-column v-for="(column,index) in tableColumn" :key="index" :prop="column.prop" :label="column.label" :formatter="column.formatter" :width="column.width" :sortable="column.sortable" > </el-table-column> <el-table-column <template slot-scope="prop"> <el-button type="text" @click="downloadProcess(prop.row)"> </el-button> <el-button type="text" @click="unloadProcess(prop.row)" Class ="unload"> </el-button> </template> </el-table-column> </el-table> </el-row> <el-row type="flex" justify="end" style="margin-top: 8px"> <el-pagination background :page-size="5" :current-page="currentPage" :total="stachData.totalCount" @current-change="handlePageChange" layout="total, prev, pager, next" > </el-pagination> </el-row> </div> </template> <script> export default { name: 'list', components: {}, props:{//table title listTitle:{type: String, require: true, deafult: }, /** tableData:{data:[] // totalCount: 0 // totalCount: 0} **/ tableData:{type: Obejct, require: true, default: {}}, tableColumn:{type: Array, require: true, default: []}, // table loading loading: {type: Boolean, default: False},}, data() {return {stachData = null, // table paginationData = [], // table pageSize = 5, CurrentPage = 1, search_data = "", // search content}; }, methods: {getTableList(){this.paginationData = [] for(let I = this.pagesize * (this.currentPage-1); i < this.pageSize * this.currentPage ; i++){ if(this.stachData['data'][i]){ this.paginationData.push(this.stachData['data'][i]) }else{ break } } }, // page handlePageChange(index){this.currentPage = index this.gettablelist ()}, // search data search(){let result ={data: [], totalCount: 0 } result.data = this.tableData.data.filter((val,index,arr) => { let reg = new RegExp(this.search_data, 'gi') return val.fileName.match(reg) }) result.totalCount = result.data.length this.stachData = result $this.getTableList()}, // downloadProcess(row){this.$emit("downloadProcess",row)}, UnloadProcess (row){this.$emit("unloadProcess",row)}, HandleAdd (){this.$emit("handleAdd",this.listTitle)} created() { this.stachData = Object.assign({},this.tableData) this.getTableList() } }, } </script> <style lang="scss"> #list { width: 100%; .title { line-height: 36px; font-weight: 600; } .unload{ color: #F56C6C; } } </style>Copy the code