bm-card-table

用于本末项目内表格式卡片, 依赖element-ui card组件

安装

npm install bm-card-table -s

import Vue from 'vue'
import bmCardTable from 'bm-card-table'
import 'bm-card-table/bmCardTable.css'
Vue.use(bmCardTable)

<template>
    <div>
        <bm-card-table  :data="data"
                        :headerList="headerList"
                        :expandList="expandList"
                        :expandName="expandName"
                        :expandListName="expandListName"
                        :id="id">
            <div slot="content">
                <!-- 自定义content元素 -->
            </div>
            <div slot="btnMenu"
                 class="btnMenu">
                <el-button>按钮</el-button>
            </div>
        </bm-card-table>             
    </div>
</template>

<script>
export default {
    data () {
        return {
            data: {
                name
                sname: 'XXX公告名称',
                pushStatusName: '启用',
                createUserName: '老王',
                noticeSendTime: '2020-02-13',
                expandList: [
                    { icode: 'S#34134573', sname: 'xxxxxxx标段', itypeName: 'A', bedgetMoney: 3000000, mecTenderProjectBidTypeName: 'A', biddingPeriod: 90 },
                    { icode: 'S#34134573', sname: 'xxxxxxx标段', itypeName: 'B', bedgetMoney: 3000000, mecTenderProjectBidTypeName: 'A+', biddingPeriod: 90 },
                    { icode: 'S#34134573', sname: 'xxxxxxx标段', itypeName: 'C', bedgetMoney: 3000000, mecTenderProjectBidTypeName: 'A-', biddingPeriod: 90 }
                ],
                buttons: [
                    { name: '查看', round: false, type: 'primary', click: val => { console.log(val) } },
                    { name: '编辑', round: false, type: 'success', click: val => { console.log(val) } },
                    { name: '删除', round: false, type: 'danger', click: val => { console.log(val) } }
                ]
            },
            headerList: [
                { name: '公告名称', keyName: 'sname', content: '' },
                { name: '状态', keyName: 'pushStatusName', content: '' },
                { name: '经办人', keyName: 'createUserName', content: '' },
                { name: '发布时间', keyName: 'noticeSendTime', content: ''}
            ],
            expandList: [
                { label: '标段编号', keyName: 'icode', width: '150', tooltip: true},
                { label: '标段名称', keyName: 'sname', width: '', tooltip: true},
                { label: '标段类型', keyName: 'itypeName', width: '100', tooltip: true},
                { label: '预算金额（元）', keyName: 'bedgetMoney', width: '150', tooltip: true},
                { label: '招标方式', keyName: 'mecTenderProjectBidTypeName', width: '100', tooltip: true},
                { label: '合同工期(天)', keyName: 'biddingPeriod', width: '130', tooltip: true, formatter: 'biddingPeriodFormatter'}
            ],
            expandListName: 'expandList',
            expandName: '尾部表格名称',
            id: ''
        }
    }
}
</script>

参数注解

data: 卡片主数据

headerList: 展示在卡片头部的数据

expandList: 展示在卡片尾部的表格配置

expandListName: 尾部表格数组在data中的属性名

id: 用于对卡片元素进行区分, 搭配类似bm-custom-pagination这种分页的插件需要用到

用途

此为业务组件, 主要用于本末公司卡片型的表格业务, 常常与bm-custom-pagination分页插件在一起使用