> 一个表格业务组件，目的是提高后台管理系统的开发效率。
> 基于vue、element-ui、webpack，可单独使用，也可以配合ruoyi框架中使用，
> 配合若依框架使用，功能更强大
安装
``
shell
npm install ruoyi-crud
`
快速使用
`
javascript
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 |