BPagination 对话框

封装优化

• 封装 BBatchButton 和 Pagination 组合的组件；
• 添加左侧全选操作和分页控制功能；

安装注册

import { BPagination } from '@bdp/ui-vue';
Vue.use(BPagination);

基本使用

代码演示

默认参数

换页和下拉选择分页

全选批量操作联动

<template>
    <b>默认参数</b><br/>
    <BPagination :pageSize=8 :pageNum=2  :total=12 />
    <br/><b>换页和下拉选择分页</b><br/>
    <BPagination :isShowCheck=true :list="list" :selectedRowKeys="selectedRowKeys" :pageSize=8 :pageNum=2  :total=12 @changeSize="changeSize"/>
    <br/><b>全选批量操作联动</b><br/>
    <BTable 
        :isShowCheck=true 
        :list="list" 
        :selectedRowKeys="selectedRowKeys" 
        :pageSize=8 
        :pageNum=2  
        :total=12
        :batchMenuList="batchMenuList"
        @changeSize="changeSize"  
        @clickMenu="clickMenu" 
    />
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    id:1,
                    name:"title1"
                },
                {
                    id:2,
                    name:"title2"
                },
                {
                    id:3,
                    name:"title3"
                },
                {
                    id:4,
                    name:"title4"
                },
                {
                    id:5,
                    name:"title5"
                },
            ],
            selectedRowKeys: [1,2],
            batchMenuList: [
                {
                    value:'del',
                    label:'批量删除',
                    disabled:false,
                },
                {
                    value:'stop',
                    label:'批量停止',
                    disabled:true,
                },
            ]
        }
    },
    methods: {
        changeSize (pageNum, pageSize) {
            console.log("changeSize", pageNum, pageSize)
        },
         clickMenu (item, key, keyPath) {
            console.log(item, key, keyPath)
        },
    }
}
</script>

API

差异

参数	说明	类型	默认值	版本
list	列表数组	array	[]	必填
pageNum	当前页	number	1
pageSize	每页大小	number	10
total	总共数据	number	0
selectedRowKeys	选中的列表数据	array	[]
isCheckAll	是否checkbox选中	boolean	false
isShowCheck	是否显示左边操作	boolean	false
isShowPagination	是否显示右边操作	boolean	true
showSizeChanger	是否显示右边切换页面大小	boolean	true
showQuickJumper	是否显示右边快速切换指定页	boolean	true
pageSizeOptions	是否显示右边页码数组	boolean	false
batchDisabled	批量是否可用	boolean	false
batchText	批量文本提示	string	'批量操作'
batchOverlayStyle	批量显示样式	boolean	false
batchPlacement	批量文本显示位置	boolean	false
batchMenuList	批量操作列表	array	[]

更多属性请参考 ant-design-vue/pagination (opens new window)。

封装优化

安装注册

基本使用

API