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: [] /