1.0.2 • Published 2 years ago
一个表格业务组件，目的是提高后台管理系统的开发效率。
基于vue、element-ui、webpack，可单独使用，也可以配合ruoyi框架中使用，
配合若依框架使用，功能更强大
安装
npm install ruoyi-crud
快速使用
import Vue from 'vue'
import Crud from 'ruoyi-crud'
Vue.use(Crud)
// or
import {
crud,
DictTag,
Pagination,
RightToolbar
} from 'ruoyi-crud'
Vue.component(crud.name, crud)
crud属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| v-model | 业务表格新增或编辑对应表单的绑定值 | Object | | {} |
| option | 业务表格配置对象 | Object | | { column: [] } |
| data | 表格对应数据 | Array | | [] |
| page | 业务表格分页配置 | Object | | {} |
| search | 业务表格搜索栏绑定值 | Object | | {} |
crud事件
| 事件名称 | 说明 | 回调参数 |
|---|
| onLoad | 表格数据加载时触发，需用户实现 | 分页绑定对象page和搜索栏绑定对象search |
| searchChange | 业务表格搜索时触发，需用户实现 | 搜索栏绑定对象search |
| searchReset | 业务表格重置时触发，需用户实现 | - |
| rowDel | 业务表格删除时触发，需用户实现 | 被删除数组rows，如果只删除一条，数组中则只有一条记录分页配置对象page搜索栏绑定对象search |
| tableExport | 业务表格导出时触发，需用户实现 | 导出按钮加载状态exportLoading |
| formSubmit | 表格对应表单提交时触发，需用户实现 | 表单类型dialogType，值为'add'、'view'或者'edit'表单关闭方法done |
| changeForm | 表格对应表单绑定值改变时触发，需用户实现 | 表单绑定值改变后的对象form |
| beforeOpen | 表格对应表单打开前的钩子，需用户实现 | 表单类型dialogType，值为'add'、'view'或者'edit'表格当前行数据row(表单类型为'view'或者'edit') |
| beforeClose | 表格对应表单关闭前的钩子，需用户实现 | - |
crud插槽
| 插槽名称 | 说明 |
|---|
| 列名称Search | 业务表格搜索栏当前属性插槽 |
| menuLeft | 表格头部左侧内容插槽 |
| header | 表格头部内容插槽 |
| menu | 表格操作栏插槽 |
| footer | 表格尾部内容插槽 |
| 列名称Form | 表格对应表单当前属性插槽 |
| formFooter | 表格对应表单底部操作栏插槽 |
option属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| allDelBtn | 显示批量删除按钮 | Boolean | true或者false | true |
| exportBtn | 显示导出按钮 | Boolean | true或者false | true} |
| searchShow | 显示表格头部右侧操作栏 | Boolean | true或者false | true |
| selection | 显示表格批量选择列 | Boolean | true或者false | false |
| column | 表格列配置属性 | Array | - | [] |
| align | 表格列对齐方式 | String | 'left','center','right' | 'center' |
| menu | 显示表格操作栏 | Boolean | true或者false | false |
| menuWidth | 表格操作栏宽度 | Number | - | 80 |
| menuAlign | 表格操作栏对齐方式 | String | 'left','center','right' | 'center' |
| viewBtn | 显示表格操作栏查看按钮 | Boolean | true或者false | false |
| editBtn | 显示表格操作栏编辑按钮 | Boolean | true或者false | false |
| delBtn | 显示表格操作栏删除按钮 | Boolean | true或者false | false |
| labelWidth | 表格对应表单所有属性名label宽度 | Number | - | 80 |
| formFooterSlot | 是否自定义表格对应表单底部栏操作栏 | Boolean | true或者false | false |
| formFooterPosition | 表格对应表单底部栏对齐方式 | String | 'left','center','right' | 'center' |
column属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| show | 是否显示当前列 | Boolean | true或者false | true |
| label | 标题名称 | String | - | '' |
| prop | 列字段，必填 | String | - | - |
| labelWidth | 当前列的宽度 | Number | - | 100 |
| dicName | 当前列对应字典名，需配合ruoyi框架的字典功能使用，不配置则不使用字典功能 | String | - | - |
| formslot | 是否开启表单对应项插槽 | Boolean | true或者false | false |
page属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| total | 表格数据总数 | Number | - | - |
| pageNum | 当前页 | Number | - | 1 |
| pageSize | 每页显示数量 | Number | - | 10 |