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）

<template v-slot:[key]></template>

事件

| 事件 | 说明 | 返回数据 | | --------- | -------------------------------- | -------------------------------- | | 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: '',}