winowe-ui
v1.4.0
Published
vue基于element-ui二次封装的UI组件
Downloads
66
Maintainers
yw_winoweReadme
安装
npm install winowe-ui --save使用
- 全局注册使用全部组件
winoweui.nwInstall(Vue, { axios: request || axios })- 全局注册使用单个组件 compTable 除外
Vue.component(winoweui.compSearch.name, winoweui.compSearch)
Vue.component(winoweui.compMenus.name, winoweui.compMenus)- 全局注册使用 compTable 组件
使用 compTable 组件时候 vue 上面需要有$axios 存在
Vue.component(winoweui.compTable.name, winoweui.compTable)- 局部注册使用单个组件 compTable 除外
devideUpload
分片上传文件 file: input 获取到的文件信息，包含 file、content、message、status action: 文件上传的地址， 默认'/basic-gateway/basic-minio/upload/base64' processCb: 获取上传分片进度的回调函数 errorCb: 上传报错的回调 finallCb：所有分片上传完成的回调函数，包含每个分片返回的信息 headers：配置 headers 参数 size：分片的大小，以 B 为计算单位 application：存储桶，可以理解为业务模块 params: object{}对象，其他需要携带的上传参数
compMenus
基于 vue 和 elementUI 二次开发的菜单组件。
- 示例
<template>
<comp-menus :menus="menus" :value.sync="defaultMenu"></comp-menus>
</template>
<script>
export default {
data() {
return {
defaultMenu: '/RoadProjectManagement/approvalTrafficOrganizationPlan',
menus: [
{
icon: 'icon-jifenguize',
id: 'zb2',
label: '一级菜单1',
labelCode: null,
menuType: '2',
menuUrl: '/dangerRoad',
parentId: null,
qxbs: 'ORDER:JCSB:MOTORCYCLE',
xtid: null,
children: [],
},
{
icon: 'icon-jiaotongshijianfenxi',
id: 'zb3',
label: '一级菜单2',
labelCode: null,
menuType: '1',
menuUrl: '/motorcycleMang1',
parentId: null,
qxbs: 'ORDER:JCSB:MOTORCYCLE',
xtid: null,
children: [
{
icon: 'icon-kapianmoshi',
id: 'zb31',
label: '二级菜单1',
labelCode: null,
menuType: '2',
menuUrl: '/roadIntegral',
parentId: 'zb3',
qxbs: 'ORDER:JCSB:MOTORCYCLE',
xtid: null,
children: [],
},
{
icon: 'icon-jinglingguanli',
id: 'zb32',
label: '二级菜单2',
labelCode: null,
menuType: '2',
menuUrl: '/tunnelIntegral',
parentId: 'zb3',
qxbs: 'ORDER:JCSB:MOTORCYCLE',
xtid: null,
children: [],
}
],
}
],
}
},
created() {},
methods: {},
}
</script>compTable
基于 vue 和 elementUI 二次开发的表格组件，支持 el-table 基础功能，扩展分页查询，可支持动态和静态数据，目的是提高开发效率，减少代码量。 由于组件数据是通过组件内部请求发起，故需要将 axios 挂在到组件上；原因：分页时需要重新拉取数据，一般项目会对请求和返回头进行封装，例如设置 token，故将 axios 对象传入。 注：组件已与后端约定好数据返回格式
- 示例
<template>
<div class="app-table">
<p>动态数据</p>
<comp-table :rowKey="'lsh'" :cols="cols" :opts="opts" ref="comTable" class="mt16"></comp-table>
<p>静态数据</p>
<comp-table
:rowKey="'lsh'"
style="margin-top: 10px"
:cols="cols"
:opts="opts1"
ref="comTable"
class="mt16"
></comp-table>
</div>
</template>
<script>
export default {
data() {
return {
opts: {
url: '/api/login',
},
opts1: {
dataType: 'static',
tableList: [
{
lsh: '123',
jylsh: '4234',
jcxdh: '153423',
jyjgbh: '1122413',
},
{
lsh: '124',
jylsh: '4234',
jcxdh: '153423',
jyjgbh: '1122413',
},
],
},
cols: [
{ isSelect: true,reserveSelection: true },
{ title: '序号',isIndex: true },
{ title: '流水号', key: 'lsh',sortable: true },
{ title: '检验流水号', key: 'jylsh' },
{ title: '检测线代号', key: 'jcxdh' },
{ title: '安检机构编码', key: 'jyjgbh' },
{
title: '操作',
render: (h, p) => {
console.log(h)
return h(
'el-button',
{
props: {
type: 'text',
},
},
['编辑']
)
},
},
],
}
},
created() {
for (let index = 0; index < 10; index++) {
this.opts1.tableList.push({
lsh: '124' + index,
jylsh: '4234',
jcxdh: '153423',
jyjgbh: '1122413',
})
}
},
methods: {
getRowKey(row) {
console.log(row)
return row.lsh
},
},
}
</script>
- props
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------ | ------- | ----------------- | -------- | ------ | | size | Table 的尺寸 | String | medium / small / mini | medium | | exportName | 导出文件的名称 | excel 文件 | - | - | | showHeader | 是否展示表头 | Boolean | - | | true | | rowStyle | {row, rowIndex}行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style | Object / function | - | | rowKey | row key | String / function | - | 'id' | | pagination | 分页配置，是否展示 show,分页大小:pageSize,页码按钮的数量，当总页数超过该值时会折叠 pagerCount | Object | {show:true,pageSize:0,pagerCount:5} | -- | | border | 是否带有纵向边框 | Boolean | - | true | | opts | 数据请求配置，必填 dataType 静态或动态数据类型,type 请求类型,url 请求地址,params 默认请求参数,tableList 静态数据 dataType 为 static 时生效 | Object | {dataType: 'remote',type: 'get',url: '',params: '',tableList:[]} | -- | | showIndex | 是否显示序号 | Boolean | - | false | | cols | 表格列设置；reserveSelection 在 isSelect 为 true 时生效,一般情况设置首列为{isSelect: true,reserveSelection: true},checkSelectable 设置当前列是否可选,sortable 设置是否排序 | Array | [{title: '列名',key: '字段',isSelect:false,reserveSelection:true,checkSelectable:true,sortable: true,width:'宽度',expand:'是否展开',fixed:'浮动',renderHeader:'',render:(h,row)=>{}}] | | | maxHeight | Table 的最大高度。合法的值为数字或者单位为 px 的高度 | string/number | -- | -- | | stripe | 是否为斑马纹 table | Boolean | - | true | | showOverflowTooltip | 表格列超出是否显示 tooltip | Boolean | - | true | | summaryConf | 合计行相关配置 | Object | {summary: false, sumText: '',showSummary: '',objectSpanMethod: () => {},summaryMethod: () => {},} | | highlightCurrentRow | 是否要高亮当前行 | Boolean | - | false |
- 函数
| 方法名 | 说明 | 参数 | | ------- | ---- | ------------------------------------------ | | refresh | 刷新 | params:Object,可传入附加参数或覆盖已有参数 |
- 事件
| 事件名 | 说明 | 参数 | | ---------------- | -------------------------------------------- | ------------------------------- | | selectOne | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row | | selectAll | 当用户手动勾选全选 Checkbox 时触发的事件 | selection | | selection-change | 当选择项发生变化时会触发该事件 | selection | | pagenum-change | 当页码发生变化时会触发该事件 | val | | pagesize-change | 当每页数据条数发生变化时会触发该事件 | val | | getData | dataType 为 remote 时，数据获取成功事件 | dataList,total,pageNum,pageSize | | cellClick | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
compSearch
基于 vue 和 elementUI 二次开发的搜索组件。
- 示例
<template>
<comp-search
:searchs="searchs"
:labelWidth="labelWidth"
:labelPosition="labelPosition"
@search="search"
@reset="reset"
@changeSelect="change"
></comp-search>
</template>
<script>
export default {
data() {
return {
queryForm: {},
labelWidth: '130px',
labelPosition: 'right',
searchs: [
{
name: '阿斯顿撒多撒大撒大阿',
type: 'input',
key: 'name',
spacing: -1.2,
placeholder: '请输入名称',
},
{
name: '位置',
type: 'select',
list: [
{
name: '北京',
value: '1',
label: '北京',
},
{
name: '天津',
value: '4',
label: '天津',
},
],
key: 'address',
placeholder: '请选择位置',
},
{
name: '单选',
type: 'radio',
list: [
{
name: '北京',
value: '1',
label: '北京',
},
{
name: '上海',
value: '2',
label: '上海',
},
],
key: 'address',
placeholder: '请选择位置',
},
{
name: '日期时间',
type: 'datePicker',
key: 'datePicker1',
},
{
name: '数量',
type: 'inputNumber',
key: 'number',
min: 0,
max: 100,
placeholder: '请输入数量',
},
{
name: '状态',
type: 'cascader',
list: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致',
},
{
value: 'kekong',
label: '可控',
},
],
},
{
value: 'daohang',
label: '导航',
children: [
{
value: 'cexiangdaohang',
label: '侧向导航',
},
{
value: 'dingbudaohang',
label: '顶部导航',
},
],
},
],
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
}
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'rate',
label: 'Rate 评分',
},
{
value: 'form',
label: 'Form 表单',
},
],
},
]
},
{
value: 'ziyuan',
label: '资源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '组件交互文档',
},
],
},
],
key: 'state',
isShowAllLevels: false,
props: { multiple: true, checkStrictly: true },
clearable: true,
collapseTags: true,
filterable: true,
},
{
name: '日期范围',
type: 'daterange',
key: 'daterange',
},
],
}
},
created() {},
methods: {
search2(val) {
console.log(22222, val)
},
reset2() {
console.log(10000)
},
search(val) {
const params = {
...val,
startTime: val.daterange ? val.daterange[0] : '',
endTime: val.daterange ? val.daterange[1] : '',
}
delete params.daterange
console.log(params)
},
reset(val) {
const params = {
...val,
startTime: '',
endTime: '',
}
delete params.daterange
console.log('搜索表单', params)
},
change(key, val) {
console.log(key, val)
console.log(this.queryForm)
},
},
}
</script>- props
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------- | ------ | | searchs | 搜索列表渲染的元素数组。每个数组对象包含{必填项 name:label 名称,type:元素类型,key:唯一的字段名;可配置项 spacing:配置 label 字间距;placeholder:框内提示文字,list:如果是下拉选择或级联选择需要传入数组,min:计数器允许的最小值数字,max:计数器允许的最大值数字,isShowAllLevels:级联选择框中是否显示选中值的完整路径,clearable:是否可以清空,collapseTags:多选模式下是否折叠 Tag,filterable:是否可搜索选项,props:级联选择器{ multiple: 是否多选, checkStrictly: 是否严格的遵守父子节点不互相关联 },multiple:下拉框是否多选,} | Array | -- | [] | | showBtn | 是否显示按钮 | Boolean | true/false | true | | widths | 单元素总宽度 | Number | 所有数字 | 360 | | searchForm |可设置搜索组件的默认值 | Object | -- | {} | | labelWidth | label 的宽度 | String | 所有数字需要带单位 px | 80px | | labelPosition | label 的位置 | String | left/right | left |
- 函数
| 方法名 | 说明 | 参数 | | ------------ | --------------------- | -------------------------------------- | | search | 点击搜索按钮 | 请求的form 表单数据 | | reset | 点击重置按钮 | 返回请求的 form 表单值清空 | | changeSelect | change 事件对应的函数 | key:对应的键，value:选中的值 |
- 事件
| 事件名 | 说明 | 参数 | | ------ | ------------------------------------------------ | ---------------------------- | | change | 下拉列表、时间选择、级联选择器等选择时触发的事件 | key:对应的键，value:选中的值 |