# BTable 对话框

# 封装优化

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

# 安装注册

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

# 基本使用

# 代码演示

<template>
    <BTable 
        :loading="loading"
        :listInfo="listInfo"
        :columns="columns"
        @rowSelectChange="onRowSelectChange"
        @changePage="onChangePage"
        @showSizeChange="onShowSizeChange"
        @changeSelectAll="onChangeSelectAll"
    />
</template>

<script>
export default {
    data() {
        return {
            dataSource: [],
            selectedRowKeys: [],
            selectedRows: [],
            selectedRow: undefined,
            selectedRowDir: undefined,
            viewType: 'add',
            detailModalProps: {
                visible: false,
                loading: false
            },
            listInfo: {
                list: [
                {
                    id:1,
                    title:"title1"
                },
                {
                    id:2,
                    title:"title2"
                },
                {
                    id:3,
                    title:"title3"
                },
                {
                    id:4,
                    title:"title4"
                },
                {
                    id:5,
                    title:"title5"
                },
                {
                    id:6,
                    title:"title6"
                },
                {
                    id:7,
                    title:"title7"
                },
                {
                    id:8,
                    title:"title8"
                },
                {
                    id:9,
                    title:"title9"
                },
                {
                    id:10,
                    title:"title10"
                },
                 {
                    id:11,
                    title:"title11"
                },
                {
                    id:12,
                    title:"title12"
                },
                {
                    id:13,
                    title:"title13"
                },
                {
                    id:14,
                    title:"title14"
                },
                {
                    id:15,
                    title:"title15"
                },
                ],
                pagination: { 
                    pageNum: 1,
                    pageSize: 10,
                    total: 15
                 }
            },
            batchMenuList: [
                {
                    value:'del',
                    label:'批量删除',
                    disabled:false,
                },
                {
                    value:'stop',
                    label:'批量停止',
                    disabled:true,
                },
            ],
            loading: false,
            columns: [
                {
                title: 'ID',
                dataIndex: 'id'
                },
                {
                title: 'Title',
                dataIndex: 'title',
                }
            ]
          }
    },
    methods: {
        async handleDel(rowId) {
            try {
                this.loading = true
                // const { isSuccess } = await delOne(rowId)
                this.loading = false
                if (isSuccess) {
                this.handleSearch()
                }
            } catch (error) {
                this.loading = false
                console.error(error)
            }
        },
        handleSearch(resetFlag) {
            this.getData({ pageNum: 1 }, resetFlag)
        },
        async getData(pageInfo = {}, resetFlag) {
            const { resetFields, getFieldsValue } = this.form
            const { pagination } = this.listInfo
            if (resetFlag) {
                resetFields()
                return
            }
            const pageInfoN = { ...pagination, ...pageInfo }
            const res = {
                ...getFieldsValue(),
                page_size: pageInfoN.pageSize,
                from: (pageInfoN.pageNum - 1) * pageInfoN.pageSize,
                fields: 'all'
            }
            this.loading = true
            try {
                // const { isSuccess, data: { list = [], pagination = {} } } = await getList(res)
                // this.loading = false
                // if (isSuccess) {
                //     this.listInfo = {
                //         list,
                //         pagination: {
                //         ...pageInfoN,
                //         ...pagination
                //         }
                //     }
                // }
            } catch (error) {
                this.loading = false
                console.error(error)
            }
        },
        onRowSelectChange(keys, rows) {
            this.selectedRowKeys = keys
            this.selectedRows = rows
        },
        onChangeSelectAll(keys, rows) {
            this.selectedRowKeys = keys
            this.selectedRows = rows
        },
        onChangePage(pageNum, pageSize) {
         this.getData({ pageNum, pageSize })
        },
        onShowSizeChange(pageNum, pageSize) {
         this.getData({ pageNum, pageSize })
        },
        changeSize (pageNum, pageSize) {
            console.log("changeSize", pageNum, pageSize)
        },
         clickMenu (item, key, keyPath) {
            console.log(item, key, keyPath)
        },
    }
}
</script>

# API

差异

参数	说明	类型	默认值	版本
loading	是否加载中	boolean	false	必填
columns	表头信息	array	[]	必填
listInfo	对象包含list, pagination数据	array	[]	必填
pagination.pageNum	当前页	number	1
pagination.pageSize	每页大小	number	10
pagination.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/table (opens new window)。

← BPagination