vue 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

2019独角兽企业重金招聘Python工程师标准>>>

组件代码：

<template>
  <div class="table">
  <!--表格-->
  <el-table border stripe id="iTable" :data="list">
     <!--数据列-->
    <el-table-column v-for="(column, index) in columns" :prop="column.prop" :key="index" :label="column.label">
      <template slot-scope="scope">
        <template v-if="column.formatter">
          <span v-html="column.formatter(scope.row)"></span>
        </template>
        <template v-else><span>{{scope.row[column.prop]}}</span></template>
      </template>
    </el-table-column>
    <!--按钮操作组-->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-dropdown trigger="click" @command="handleCommand">
          <el-button type="primary" size="mini">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu v-if="scope.row.type" slot="dropdown">
            <el-dropdown-item v-for="(btn,key) in scope.row.type" :key="key" :command='[btn.label,scope.row]'>{{btn.label}}</el-dropdown-item>
          </el-dropdown-menu>
          <el-dropdown-menu v-else slot="dropdown">
            <el-dropdown-item v-for="(btn,key) in operates" :key="key" :command='[btn.label,scope.row]'>{{btn.label}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <div class="block">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.PageIndex" :page-sizes="[10, 20, 30,50,100]" 
    :page-size="page.PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>
  </div>
 </div>
</template>
<script>
export default {
  props:{
    list: {
      type: Array,
      default: []
    },
    page:{
      type:Object,
      default:null
    },
    columns:{
      type:Array,
      default:[]
    },
    operates: {
      type: Array,
      default:[]
    },
    totalCount:{
      type:Number,
      default:0
    }
  },
  methods:{
     // 切换每页显示的数量
    handleSizeChange (size) {
      this.$emit('handleSizeChange', size);
      this.pageIndex = 1;
    },
    // 切换页码
    handleCurrentChange (index) {
      this.$emit('handleCurrentChange', index);
      this.pageIndex = index;
    },
   // 操作
    handleCommand(command){
      this.$emit('handleCommand', command);
    }
  }
}
</script>

引用组件代码：

<template>
     <div class="table-page">
        <i-table  :columns="columns" :list="list" :operates="operates" :totalCount="totalCount" :page="page" @handleSizeChange="handleSizeChange"
        @handleCurrentChange = "handleCurrentChange" :tabelLoading="tabelLoading" @handleCommand="handleCommand">
        </i-table>
    </div>
</template>
<script>
import iTable from './iTable'
export default {
    components: {iTable},
    data(){
        return{
            tabelLoading:false,
            totalCount:6,
            page: {
                PageSize: 10,
                PageIndex: 1,
                ConditionJson: {}
            },
            list:[
                {"id":"10000","title":"哈哈哈"},
                {"id":"10001","title":"哈哈dfsf哈"},
                {"id":"10002","title":"哈哈4234哈"},
                {"id":"10003","title":"哈666哈哈"},
                {"id":"10004","title":"哈234324哈哈"},
                {"id":"10005","title":"哈哈r哈"},
            ],
            columns: [
            {
                prop: 'id',
                label: '编号',
                formatter: (row) => {
                    if(row.id == "10000"){
                        return `<span>编号1</span>`
                    }else{
                        return row.id
                    }
                }
            },
            {
                prop: 'title',
                label: '标题',
                formatter: (row) => {
                    return `<span style="white-space: nowrap;color: dodgerblue;">${row.title}</span>`
                }
            }],
            operates:  [
            {
                label: '编辑'
            },
            {
                label: '删除'
            }]// 列操作按钮`
        }
        
    },
    methods:{
        // 切换每页显示的数量
        handleSizeChange (size) {
            this.limit = size
            console.log(' this.limit:', this.limit)
        },
        // 切换页码
        handleCurrentChange (index) {
            this.page = index
            console.log(' this.page:', this.page)
        },
        // 操作
        handleCommand(command){
            console.log(command)
        }
    }
}
</script>

 

 

转载于:https://my.oschina.net/glysunset/blog/1835148