ruoyi-crud

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