一个表格业务组件，目的是提高后台管理系统的开发效率。 基于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 |