Educiot-common NPM

edu-common

基于elment-ui的二次开发，将常用的部分进行封装，节约开发时间
主要用于后台管理系统开发，包含表格（table），筛选（filter），分页（page）

table-vue(表格组件)

参数

参数	类型	必传	说明	默认值
list	Array	是	数据	[]
tabs	Array	是	表格字段	[]
spanMethod	Function	否	合并单元格	-
hi	Number	否	浏览器高度减去hi得到table高度	300
rowKey	String	否	树形数据row-key	id
childKey	String	否	树形数据children	children
hasKey	String	否	树形数据hasChildren	hasChildren
checkKey	String	否	checkbox的绑定属性的key	checked
radioCheck	Object	否	单选按钮选中值	{val: ''}
open	Boolean	否	是否展开树结构	false
page	Number	否	当前页	1
size	Number	否	每页条数	10
showHead	Boolean	否	是否展示头部	true

tabs元素格式

参数	类型	必传	说明
name	string	是	th所展示名称
key	String\|\|Funciotn（a,b）	否	td的值，为string类型时为数据字段名，funciont类型时scope.row,scope.$index)可以是一段html
w	Number	否	表格宽度
alg	String	否	对齐方式，默认center
st	Boolean	否	当内容过长被隐藏时显示 tooltip
ope	Array	否	操作栏的按钮合计
rel	Boolean	否	td内容是否为按钮
clk	Boolean	否	td内容是否可点击
child	Array	否	子表头
check	Boolean	否	是否是checkbox
radio	Boolean	否	是否是radio
checks	Array\|\|Funciotn（a,b）	否	多选框组
sort	boolean,string	否	是否排序

ope格式

参数	类型	必传	说明
name	String	是	按钮文字内容
trends	Boolean	否	动态加载
need	Function(a,b)	否	动态加载的条件
type	String	否	按钮类型，默认text

checks格式

参数	类型	必传	说明
name	String	否	checkbox的名称
id	String \|\| Number	否	checkbox的值
dis	Boolean	否	禁用

事件

事件	说明	返回值
check	td中的button点击事件	{btn: o,data: d},o:当前按钮对象，d：当前tr数据
checks	td中多选框组change事件	object,当前tr值
boxCheck	td中多选框change事件	{val: 当前状态, data: tr数据}
checkRadio	td中多选框change事件	object,当前tr值
sort	表格排序事件	{column, prop, order}

方法

this.$refs自定义的ref.getChecks()

方法	说明	返回值
getChecks	获取当前列表中选中的项	选中项的数组

filter-vue(筛选组件)

参数

参数	类型	是否必传	说明
list	Array	是	筛选控件列表
params	Object	是	筛选所涉及的参数合集

list示例

[ { name: '搜索', list: {name: '输入名称', type: 'input', key: 'query'} },{ name: '过滤', list: {name: '选择发布时间', type: 'time', key: 'time', col: 4} } ]

参数list中元素的list详细字段

参数	类型	是否必传	说明
name	String	是	placeholde值或者按钮展示内容
type	String	是	控件类型：input \| button \|buttons\| select\|time \| times \| label \|tree(select聚焦弹窗)
key	String	是	params中对应的key
col	Number	是	el-col中的 span属性
options	Array	否	type为select时的下拉列表
group	boolean	否	option是否分组
child	String	否	group为true时分组option的集合
label	String	否	option的label，默认‘name’
value	String	否	option的value，默认‘id’
plain	boolean	否	朴素按钮
before	string	否	表单前文案
props	object	否	日期选择的options
clear	boolean	否	select是否可以清空

事件

事件	说明	返回值
filBtn	button点击事件	当前按钮信息
show	类型为tree触发事件	true

page-vue（页码组件）

参数

参数	类型	说明	默认值
page	Number	页数	1
size	Number	每页条数	10
total	Number	总条数	0

事件

事件	说明	返回数据
action	页码切换事件	当前页

page-head（页面头部组件）

参数

参数	类型	说明	默认值
title	String	标题	育联网柔性智造平台
user	Object	登录信息	{sn: '演示学校',account: 'admin'}
bgc	String	背景色	#002fa7

dialog-vue（弹窗组件）

参数

参数	类型	说明	默认值
title	String	标题	‘’
body	Boolean	是否插入body	10
show	Boolean	展示	false
width	String	宽度	50%
btns	Boolean	是否展示底部按钮	true
btncls	Boolean	是否展示取消按钮	true
clstext	String	取消按钮文案	取消
savetext	String	保存按钮文案	确定
textalg	String	底部按钮位置	right
close	Boolean	右上角关闭按钮	true
modal	Boolean	点击modal关闭	true
escape	Boolean	点击esc关闭	true
destroys	Boolean	关闭销毁弹窗	false

事件

事件	说明	返回数据
hide	关闭弹窗事件	false
save	确定按钮点击事件	true

crumbs-vue（面包屑组件）

参数

参数	类型	说明	默认值
list	Array	数据	[]
hasmb	Boolean	底部是否有边界值	true
origin	String	域名	测试环境

list参数

参数	类型	说明
name	String	名称
path	String	本地路由
href（与path只能存在一个）	String	外部链接

form-vue（form表单）

参数

参数	类型	说明	默认值
list	Array	表单列表	无
data	Object	表单绑定得值	无
width	String	label-width	80px
position	String	label位置	left
size	string	表单大小	-

list参数

参数	类型	说明
name	String	label名称或btn名称
type	String	类型：list,input,select,radio,check,button,switch,time,upimg,upfile,tree,editopt,number,cascader
key	String	data中对应得key
lx	String	input、button、time得type类型
options	Array	select、radio、check得子集
label	String	options中对象绑定得key，默认值id
value	String	options中展示得key，默认值name
width	Number	上传图片盒子得宽度
height	Number	上传图片盒子得高度
namekey	String	附件名称的key
list	Array	type为list时控件集合，内容与父级相同
reg	object	input输入正则表达式（过滤满足正则内容）
disabled	Boolean	禁用
props	object	组件的配置项

插槽（slot）

事件

事件	说明	返回数据
btnClick	btn点击事件	当前btn数据
upload	上传事件	{f:file对象,d: 当前上传控件数据}
show	type为tree时聚焦事件	当前对象数据
editopt	type为editopt时，选项的编辑事件	当前选项
deleopt	type为editopt时，选项的删除事件	当前选项
selectVal	type为select时，组件change事件	{val:当前值,data:当前对象}
setCas	type为cascader是，组件change事件	{val: 当前选项,data: 当前对象}
onblur	input失焦事件	{event: event, data: 当前对象}

例子：

list:[ {name: '姓名',type: 'input',key: 'name',max: 5,must: true},

{name: '头像',type: 'upimg',key: 'img',width: 150,height: 150},

{name: '性别',type: 'radio',key: 'sex',options: {name: '女',id: 0},{name: '男',id: 1}},

{name: '籍贯',type: 'select',key: 'city',options:{name: '中国',id: 0},{name: '外国',id: 1}},

{name: '性格',type: 'list',list: [{name: '选择性格',type: 'select',key: 'nature',options: {name: '外向',id: 0},{name: '内向',id: 1}},{name: '添加性格+',type: 'button'}]},

{name: '简介',type: 'input',key: 'guite',max: 200,lx: 'textarea'},

{name: '附件',type: 'upfile',key: 'url',namekey: 'fn'}]

data: {fn: '',sex: '', img: '',name: '',city: '',guite: '',nature: '',}

vue educiot-common

@infinitebrahmanuniverse/nolb-edu @everything-registry/sub-chunk-1555 edu-ui-pc

2 years ago

2 years ago

2 years ago