iview表格二次封装,使其支持分页

iview表格二次封装,使其支持分页

新项目要使用iview搭建,是iview UI,不是iview Admin,因为那个要钱;由于之前的项目使用的是Ant Design Pro Of Vue,里面提供的s-table用着很顺手,于是就按着同样是使用方式去封装一个ivew的s-table

效果图

直接上源码,附使用文档

<template>
  <div>
    <Table v-bind="$attrs"
           :data="tableData"
           :loading="loading"
           border
           v-on="$listeners"
           @on-select="onSelect"
           @on-select-cancel="onSelectCancel"
           @on-select-all="onSelect"
           @on-select-all-cancel="onSelectAllCancel"
    >
      <template v-for="column in $attrs.columns" slot-scope="{ row, index }" :slot="column.slot">
        <slot :name="column.slot" :row="row" :index="index" v-if="column.slot"></slot>
      </template>

    </Table>
    <div class="page">
      <Page :total="total"
            :current.sync="pagination.pageNum"
            :page-size="pagination.pageSize"
            show-sizer
            show-total
            @on-change="loadData"
            @on-page-size-change="onPageSizeChange"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'STable',
    props: {
      rowKey: {
        // 开启多选的时候要给
        type: String,
        default: 'id'
      },
      data: {
        type: Function | Array,
        required: true
      },
      front: {
        // 是否前端分页
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        tableData: [],
        loading: false,
        pagination: {
          pageNum: 1, //当前页码
          pageSize: 10 //	每页条数
        },
        total: 0, // 数据总数,
        selection: [] /
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值