vue-element-admin-master table分页详细配置

Pagination

• 首先引入element-admin-master自带的分页组件和自己的集合接口

  • import Pagination from '@/components/Pagination'
    import {getYouths} from '@/api/test'
    

  • 集合接口如下

    export function getYouths(query) {
      return request({
        url:'/getYouths',
        method: 'post',
        params:query,
      })
    }
    

• 在table中引入

  • <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    

• 在js中注册

  • export default {
      name: "index",
      components: { Pagination },
      data() {
        return {
          listLoading: true,//开启加载动画
          tableData: [],//要显示的集合
          total: 0,//总页数
          listQuery: {
            page: 1,//当前页
            limit: 10//每页显示的条数
          },
        }
      },
      created() {
      	this.getList()
      },
      methods: {
      	getList() {
        	this.listLoading = true
            //调用接口
            getYouths(this.listQuery).then(res=>{
              this.tableData=res.data.items//调取每页的数据
              this.total = res.data.total//设置总数据条数
              this.listLoading = false
            })
        },
      }
    }
    

• Controller

  • @CrossOrigin
    @RequestMapping("/getYouths")
    public Map getYouth(int page,int limit){
        List<Map<String, Object>> items = helloMapper.getItemsYouth(page*limit-limit,limit);
        HashMap<String, Object> responseData = new HashMap<>();
        HashMap<Object, Object> data = new HashMap<>();
        data.put("items",items);
        List<Map<String, Object>> aLlYouth = helloMapper.getALlYouth();
        data.put("total",aLlYouth.size());
        responseData.put("code",20000);
        responseData.put("data",data);
        return responseData;
    }
    

• Mapper

  • List<Map<String ,Object>> getItemsYouth(int page, int limit);
    List<Map<String ,Object>> getALlYouth();
    

• xml

  • <select id="getItemsYouth" resultType="java.util.Map">
        select * from record.repeatname limit #{param1},#{param2}
    </select>
    <select id="getALlYouth" resultType="java.util.Map">
        select * from record.repeatname
    </select>