作者:管理员 历史版本:1 最后编辑:龚清 更新时间:2024-09-20 15:13
ibps-crud【增删改查】
起步
介绍
ibps-crud是一套基于Vue.js 2.2.0+和Element 2.12.0+的表格组件,ibps-crud将 Element 的功能进行了封装,并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可根据配置的json实现,大大简化了开发流程。
功能
- 继承了 Element 中表格所有功能
- 新增表格数据
- 修改表格数据
- 删除表格数据
- 使用 Element 中的组件渲染表格内容和表单内容
- 渲染自定义组件
使用
通用组件components
import Vue from 'vue'
import ibpsContainer from './ibps-container'
import ibpsContainerFrame from './ibps-container-frame'
import ibpsLinkBtn from './ibps-link-btn'
import ibpsCheckbox from './ibps-checkbox'
// 注意 有些组件使用异步加载会有影响
Vue.component('ibps-container', ibpsContainer)
Vue.component('ibps-container-frame', ibpsContainerFrame)
Vue.component('ibps-checkbox', ibpsCheckbox)
Vue.component('ibps-link-btn', ibpsLinkBtn)
Vue.component('ibps-highlight', () => import('./ibps-highlight'))
Vue.component('ibps-icon', () => import('./ibps-icon'))
Vue.component('ibps-icon-svg', () => import('./ibps-icon-svg/index.vue'))
Vue.component('ibps-icon-select', () => import('./ibps-icon-select/index.vue'))
Vue.component('ibps-icon-svg-select', () => import('./ibps-icon-svg-select/index.vue'))
Vue.component('ibps-empty', () => import('./ibps-empty/index.vue'))
Vue.component('ibps-toolbar', () => import('./ibps-toolbar/index.vue'))
Vue.component('ibps-crud', () => import('./ibps-crud/index.vue'))
Vue.component('ibps-layout', () => import('./ibps-layout/index.vue'))
Vue.component('ibps-tree', () => import('./ibps-tree/index.vue'))
Vue.component('ibps-list', () => import('./ibps-list/list.vue'))
Vue.component('ibps-item', () => import('./ibps-list/list-item.vue'))
Vue.component('ibps-list-group', () => import('./ibps-list/list-group.vue'))
Vue.component('ibps-hyperlink', () => import('./ibps-link'))
Vue.component('ibps-help', () => import('./ibps-help/index.vue'))
引入插件库plugins
...
// 引入平台所有通用组件
import '@/components'
...
写入main.js
...
// 核心插件
import ibps from '@/plugins/ibps'
...
// 平台核心插件
Vue.use(ibps)
...
之后就可以在项目中使用ibps-crud了。