zoukankan      html  css  js  c++  java
  • vue+element-ui分页和删除组件的抽出

    -----------MyTable.vue组件页面

    <template> <div> <el-table :data="tableData" :default-sort="{prop:tableProp , order: tableOrder}" @sort-change="changes" border> <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name" sortable></el-table-column> </el-table> <el-pagination name="fenye" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total=total> </el-pagination> </div> </template> <script> export default{ name: 'mytable', data(){ return{ tableData: [], currentPage:1, pageSize:10, tableProp:this.tablep.prop, tableOrder:this.tablep.order, sort:1, total:0 } }, props:['tableKey','tablep'], methods:{ //table排序触发 changes({ column, prop, order }){ this.tableProp = prop; this.tableOrder = order; if(order !== 'descending'){ this.sort = 0; }else{ this.sort = 1; } this.tableChang(); return false; }, //修改每页条数触发 handleSizeChange(val) { this.currentPage = 1; this.pageSize = val; this.tableChang(); }, //翻页触发 handleCurrentChange(val) { this.currentPage = val; this.tableChang(); }, //更新table数据 tableChang(){ this.$post(this.tablep.url,{ pageSize: this.pageSize, current: this.currentPage, orderBy:this.tableProp, sort:this.sort }).then(res=>{ this.total = res.data.total; this.tableData = JSON.parse(JSON.stringify(res.data.list)); }) } } } </script>

    ------------调用MyTable组件

    <template> <div class="container"> <sl-table :tableKey="tableKey" :tablep="tablep" ></sl-table> </div> </template> <script> import Table from '@/components/mytable'; export default { data () { return { tableKey: [{ name: '用户名', value: 'username' },{ name: '密码', value: 'password' },{ name: '昵称', value: 'othername' }], tablep:{ url:'后台数据接口', prop:'排序字段', order: 'descending' //descending为倒序aescending为正序 } } }, components: { 'sl-table': Table } } </script>

    很简单的完成vue+elementui的分页界面

  • 相关阅读:
    POJ 2251 Dungeon Master
    HDU 3085 Nightmare Ⅱ
    CodeForces 1060 B Maximum Sum of Digits
    HDU 1166 敌兵布阵(树状数组)
    HDOJ 2050 折线分割平面
    HDU 5879 Cure
    HDU 1878 欧拉回路
    HDU 6225 Little Boxes
    ZOJ 2971 Give Me the Number
    HDU 2680 Choose the best route
  • 原文地址:https://www.cnblogs.com/lqtbk/p/9635783.html
Copyright © 2011-2022 走看看