backend-management-ui

backend-management-ui

一个基于 ElementUI 封装的 Vue2 后台管理组件库，简化后台开发中表格、表单、弹窗、按钮组、虚拟下拉框等高频组件的使用。

现有组件：ui-form、ui-table、ui-btns、ui-dialog、ui-virtual-select、status

特性

• 基于ElementUI的二次封装，完全兼容ElementUI原有API与功能，无需额外适配
• 极简配置化开发：表格 / 表单 / 按钮组等组件通过 JSON 配置快速生成，无需重复写模板
• 高频业务场景全覆盖：内置配置化表格、表单、按钮组、虚拟滚动下拉框等核心组件
• 轻量无冗余：仅依赖 Vue2 + ElementUI + vue-virtual-scroll-list，无第三方冗余依赖，兼容低版本Node环境
• 基于 ElSelect + vue-virtual-scroll-list 实现海量数据下拉选择，解决大量数据渲染卡顿问题

安装

npm 安装

npm install backend-management-ui --save

如果安装报错，与 peerDependencies 冲突

npm install backend-management-ui --save --legacy-peer-deps

yarn 安装

yarn add backend-management-ui

安装虚拟滚动

npm install vue-virtual-scroll-list --save

快速上手

全局引入

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import BackendManagementUI from 'backend-management-ui'

Vue.use(ElementUI)
Vue.use(BackendManagementUI) // 全局注册所有组件，放在ElementUI后面

按需引入

// main.js
import Vue from 'vue'
import { UiForm } from 'backend-management-ui'
// 全局注册单个组件
Vue.component('UiForm', UiForm)

// 组件内
import { UiForm } from 'backend-management-ui'
export default {
  components: {
    UiForm
  }
}

组件示例和文档

ui-form 表单

使用el-form进行的二次封装

基本用法

典型编辑型表单

<template>
    <ui-form :model="searchForm" :formConfig="formConfig" label-width="100px"></ui-form>
</template>

<script>
export default {
    data() {
        return {
            searchForm: {
                orderNo: null,
                status: null
            },
            formConfig: [
                {
                    label: '订单号',
                    prop: 'orderNo',
                    component: 'el-input'
                },
                {
                    label: '状态',
                    prop: 'status',
                    component: 'el-select',
                    options: [
                        { label: '成功', value: 0 },
                        { label: '失败', value: 1 }
                    ]
                }
            ]
        }
    }
}
</script>

典型展示表单

<template>
    <ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" :showOperateBtn="false">
        <template #item-orderNo="{ item, model, index }">
            <span>{{ model.orderNo }}</span>
        </template>
        <template #item-status="{ model }">
            <span>{{ model.status }}</span>
        </template>
    </ui-form>
</template>

<script>
export default {
    data() {
        return {
            searchForm: {
                orderNo: "订单好xx",
                status: "成功"
            },
            formConfig: [
                { label: '订单号', prop: 'orderNo', },
                { label: '状态', prop: 'status', }
            ]
        }
    }
}
</script>

下拉类型接口获取数据

// 或者 :apiMapConfig="{ status: statusApi }"
<ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" >
    <template #customBtn>
        <el-button type="primary">导出</el-button>
    </template>
</ui-form>

<script>
import { statusApi } from "@/api/status"
export default {
    data() {
        return {
            searchForm: {
                orderNo: null,
                status: null
            },
            formConfig: [
                {
                    label: '订单号',
                    prop: 'orderNo',
                    component: 'el-input'
                },
                {
                    label: '状态',
                    prop: 'status',
                    component: 'el-select',
                    api: statusApi,
                    {/* 或者 */}
                    {/* api: {
                        url: statusApi,
                        params: {
                            page: 1,
                            pageSize: 10,
                        }
                    } */}
                }
            ]
        }
    }
}
</script>

其他用法

// Form Attributes/Methods直接传
<ui-form :model="searchForm" :formConfig="formConfig" inline label-width="100px">
</ui-form>
<script>
export default {
    data() {
        return {
            searchForm: {
                orderNo: "订单好xx",
                status: "成功"
            },
            formConfig: [
                {
                    label: "月份区间",
                    prop: "dates",
                    component: "el-date-picker",
                    attrs: {
                        type: "month",
                        "value-format": "yyyy-MM",
                        format: "yyyy年MM月",
                        clearable: false, // 所有的表单组件如果有clearable，默认是true
                    },
                    events: {
                        {/* el-date-picker的原生组件事件 */}
                        change: (val) => {
                            console.log(val)
                        },
                    },
                }
                {
                    label: '订单号',
                    prop: 'orderNo',
                    component: 'el-input',
                    {/* Form-Item Attributes */}
                    formItemAttrs: {
                        "label-width": "120px",
                        size: "small"
                    },
                },
                {
                    label: '状态',
                    prop: 'status',
                    component: 'el-select',
                    {/* 表单组件属性 */}
                    attrs: {
                        style: {
                            width: "200px", // 默认220px
                        },
                        filterable: true,
                        events: {
                            change: (val) => {
                                console.log(val)
                            }
                        }
                    },
                    {/* options有长度时不会触发api */}
                    options: [
                        { label: "成功", value: 0 }
                    ]
                }
            ]
        }
    }
}
</script>

props & slots & methods

props

formConfig配置项

slots

methods

ui-table 表格

使用el-table进行的二次封装

基本用法

表格用法

<ui-table show-selection show-operation :loading="loading" :table-columns="tableColumns" :data="tableData" :pagination-config="pagination" :total="total" :operation-config="{ width: 140 }" @change-pagination="handleChangePagination" @selectionChange="handleSelectionChange">
    <template #header-test4>
        <div>表头插槽</div>
    </template>
    <template #test4="{ row }">
        <div>单元格插槽{{row.test4}}</div>
    </template>
    <template #operation="{ row }">
        <ui-btns :btns="operateBtns" :context="row" />
    </template>
</ui-table>
<script>
export default {
    data() {
        return {
            loading: false,
            tableColumns: [
                {
                    label: "测试1",
                    prop: "test1",
                    "min-width": 150,
                    "show-overflow-tooltip": true,
                    fixed: "left",
                },
                {
                    label: "测试render一大一小的两行数据",
                    prop: "test2",
                    "min-width": 150,
                    "show-overflow-tooltip": true,
                    render: ({ row, column, $h, index }) => {
                        const { test2, test2Code } = row;
                        return $h("div", { style: { width: "100%" } }, [
                            $h("div", { class: "bm-table-cell" }, test2),
                            $h("div", { style: { color: "#AAAAAA", fontSize: "12px" } }, test2Code),
                        ]);
                    }, // 单元格render形式
                },
                {
                    label: "测试组件",
                    prop: "test3",
                    width: 200,
                    component: 'Status', // 单元格使用component组件形式时，默认会把row，column，index 传入组件
                    componentProps: { statusName: "test3" }, // componentProps组件需要的参数
                    {/* componentEvents: {
                        change: (val) => {},
                        ...
                    } // 组件的事件，如果有的话 */}
                },
                {
                    label: "测试4",
                    prop: "test4",
                    width: 100,
                    formatter: (val, row, index) => val || "-", // 单元格内容格式化
                },
                { 
                    headerSlot: true, // 表头使用插槽
                    prop: "test5", 
                    slot: true // 单元格插槽形式
                },
                {
                    label: "测试5-可点击的单元格", // 默认active样式
                    prop: "test5",
                    width: 100,
                    clickable: true, // 一直可点击 render形式、组件形式和插槽形式时不生效

                    {/* 或者使用条件判断
                    clickableClass: ({row}, col) => row[col.prop] > 0  */}
                    onCellClick: ({row, col, index}) => {} // 单元格可点击时触发的方法
                }
            ],
            tableData: [],
            pagination: {
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            operateBtns: [
                {
                    label: "详情",
                    type: "text",
                    action: (params) => {

                    },
                },
                {
                    label: "操作记录",
                    type: "text",
                    action: ({ context }) => {
                        this.currentRow = context;
                        this.getOperateLogInfo();
                    },
                },
            ],
            currentRow: null
        }
    },
    methods: {
        init() {},
        handleChangePagination(pagination) {
            this.pagination = pagination
            this.init()
        },
        handleSelectionChange(selection) {},
        getOperateLogInfo() {}
    }
}
</script>

props & slots & methods

props

methods

ui-btns

使用el-button进行的二次封装

基本用法见table示例

props

btns

ui-dialog

使用el-dialog进行的二次封装

基本用法

<ui-dialog
    :visible.sync="show"
    title="弹框标题"
    confirm-text="确认"
    width="60%"
    show-cancel
    @close="handleClose"
    @cancel="handleCancel"
    @confirm="handleConfirm"
>
弹框内容
</ui-dialog>

<script>
export default {
    data() {
        return {
            show: false,
        }
    },
    methods: {
        handleClose() {},
        handleCancel() {},
        handleCancel() {},
    }
}
</script>

props

methods

slots

ui-virtual-select

使用 el-select + vue-virtual-scroll-list 进行的二次封装

基本用法

<ui-virtual-select v-model="select" multiple filterable :options="options"/>

<script>
export default {
    data() {
        return {
            select: []
            options: Array.from({ length: 1000 }, (_, index) => ({ label: `${index + 1}虚拟滚动数据`, value: index + 1 }))
        }
    }
}
</script>

props

公共业务组件

Status

基本用法

<Status status-name="待提交" />

props

使用时可能存在的项目不支持可选链和空值合并运算符的报错问题

安装必要的依赖

npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev

.babelrc 或者 babel.config.js 文件 plugins字段添加

plugins: [
    ..., // 原有配置
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
]

文件 vue.config.js 新增指定babel去处理包里面的es6+语法

module.exports = {
    ..., // 原有配置
    transpileDependencies: ["backend-management-ui"]
}