vue-zeary-ctrl v1.10.5
安装
npm i vue-zeary-ctrl
import vueZearyCtrl from "vue-zeary-ctrl";
//参数默认值{lang:'zh',messageDuration:3000}
Vue.use(vueZearyCtrl);
全局扩展方法
先设置树形数据的序号
$vzcSetTreeIndex(treeDatas)
再在table里面获取树形数据生成序号
<el-table-column>
prop="name"
label="姓名"
sortable
width="180">
<template v-slot="{$index, row}">
深度优先:{{`rows.${row.path}.name`}}
<el-form-item
label-width="0"
:rules="rules.name"
:prop="`${row.customIndex!=='tempIndex'?`rows.${row.path}.name`:''}`">
<el-input v-model="row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
组件
vzc-icon 图标
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
icon | 编码 | String | ""
size | 大小 | Number | 12
vzc-select-icon 图标选择器
列子
<vzc-select-icon v-model="iconValue"></vzc-select-icon>
vzc-debounce 防抖组件
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
time | 时间 | Number | 300
# 列子
<vzc-debounce>
<vzc-button label="Debounce" type="primary" @click="btnClick('debounce')" ></vzc-button>
<vzc-button label="Debounce" type="primary" @click="btnClick('debounce1')" ></vzc-button>
</vzc-debounce>
vzc-button 按钮控件
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
accept | 上传类型 | String | ".xls, .xlsx, .doc, .docx"
code | 编码 | String | ""
label | 名称 | String | ""
type | 类型 | String | "default"
styleType | 形状 | String | "" plain/round/circle
icon | 图标 | String | "" 默认支持vzc-icon图标名称,其它图标通过slot实现
loading | 加载状态 | Boolean | false
upload | 是否上传 | Boolean | false (废除使用buttonMode)
customClass | 自定义样式 | String | ""
buttonMode | 按钮模式 | String | "default" default:默认 import:导入按钮
# Events(事件)
事件名 | 说明 | 参数
click | 按钮点击事件 | { code, label, file }
# Slot
事件名 | 说明
icon | 自定义图标
vzc-form 表单
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
labelPosition | 表单域标签的位置 right/left/top | String | "right"
labelWidth | 表单域标签的宽度 | String | "100px"
items | 项集合 | Array | []
loading | 加载状态 | Boolean | false
searchButton | 查询按钮配置 | Object | {code: "BtnSearch",label: "查询",icon: "search",type: "default"}
isSearch | 是否显示查询按钮 | Boolean | false
isReset | 是否显示重置按钮 | Boolean | false
# items Attributes(属性) 以下是自定义属性,其它属性可以参考element对应组件属性一样可以用
属性 | 说明 | 类型 | 默认值
type | 类型(radio/checkbox/input/number/select/cascader/switch/slider/time/date/datetime/rate/color/avatar/upload/selecttree/selectpopup/selecticon) | String | ""
subtype| 子类型input(password/textarea)time(timerange)date(year/month/date/dates/week/datetime/datetimerange/daterange/monthrange) upload(text/picture/picture-card) selectpopup(input/dropdown/popover) |String| ""
key | 字段 | String | ""
label | 名称 | String | ""
value | 默认值 | String | ""
operator | 过滤操作符 | String | "Equal" 按照自己系统定义
min | 最小值 | Number | 1
max | 最大值 | Number | 2
precision | 数值精度 | Number | 0
step | 计数器步长 | Number | 1
multiple | 是否多选 | Boolean | false
collapseTags | 多选时是否将选中值按文字的形式展示 | Boolean | false
checkStrictly | 多选时是否选中任意节点 | Boolean | false
valueFormat | 绑定值的格式 | String | ""
isRange | 是否区间 | String | ""
filter | 是否可搜索| Boolean | false
isGroup| 是否分组 | Boolean | false
button | 是否按钮模式(radio/checkbox) | Boolean | false
placeholder| 输入框占位文本 | String | ""
rules| 表单验证规则 | Array | []
options| 选项集合 | Array | []
props | 配置选项 | Object | {key: "key",value: "value",children: "children",disabled: false} 除了自定义属性,element对应组件属性还是可以用
url | url上传控件用 | String | ""
accept | 文件类型 | String | ""
resultFormat | 返回结果格式化 | Function | null function(result,file)
fileSize | 文件大小 | Number | 2
pickerOptions|当前时间日期选择器特有的选项参考下表| Object | {}
color | 颜色 | String,Array | 类型为 rate(["#99A9BF", "#F7BA2A", "#FF9900"]) upload("default")
itemShowEvent | 查询条件显示判断 | Function | null function(item)
# buttons Attributes(属性)
具体属性请查看vzc-button属性
# Method(方法)
方法名 | 说明 | 参数
setValue | 设置值 | { key: "值" } key 等于Items项里面的key,多个逗号隔开
getValue | 获取值 | 返回 Object对象
setOptions | 设置选项集合 | 列子1:{key: "Items项里面的key",options: [],} 列子2:[{key: "Items项里面的key",options: []},{key: "Items项里面的key",options: []}]
# Events(事件)
事件名 | 说明 | 参数
click | 按钮点击事件,用于查询表单 | { code, label, file,conds }
change | 表单里组件值改变事件 | key,value
# Slot
事件名 | 说明 |参数
列名(key) | 自定义列显示内容 | slot-scope="{ item }" type字段可以随便设置
vzc-list 列表
# Attributes(属性) 更多配置具体请看element官方文档的table属性及vzc-form属性
属性 | 说明 | 类型 | 默认值
searchItems | 查询项集合 | Array | []
searchButtonType | 查询按钮样式 | String |"default"
searchExpansion | 查询条件默认展开还是收起 | Boolean |fasle
searchButtons | 查询按钮集合 | Array | []
listItems | 列表项集合 | Array | []
listButtons | 列表按钮集合 | Array | []
pageType | 分页类型 | String | "server" no(不分页)/server(服务器分页)/local(本地分页)
isSelection | 是否多选 | Boolean | false
showRadio | 单选-是否显示单选框(只有当isSelection为false才起作用) | Boolean | false
defaultConditions | 默认查询条件 | Array | null [{Value:"值",Key:"字段",Operator:"操作符(Equal)"}]
disabled | 是否禁用 | Boolean | false
btnShowEvent | 按钮显示判断 | Function | null function({ btn, row})
btnDisabledEvent | 按钮禁用判断 | Function | null function(btn)
searchItemShow | 查询条件显示判断 | Function | null function(item)
defaultDataLoad | 是否第一次加载数据 | Boolean | true
dataLoad | 数据 | Function, Array, Object | null Function(vue, params){ //如果不用params.conds查询条件格式,还可以这么获取表单查询条件 let formParams = vue.getSearchValue();} Array([]) Object({ datas, total })
rowKey | 行数据的 Key | Function, String | "id"
height | 高度 | [Number,String] | null 注意:没设置高度自动计算高度(自动高度设置:auto)
templateColExt | 模板列扩展属性或方法 | Object | {}
isNo | 是否显示序号 | Boolean | false
operFixed | 操作列位置 | String | right
operType | 操作列样式 | String | icon (link,button,icon,dropdown)
operWidth | 操作列宽度 | Number | 0 不设置自适应
operFontWidth | 操作列每个文字的宽度 | Number | 0 自适应宽度时候,因框架样式问题可能显示不对时则需设置
showSummary | 是否在表尾显示合计行 | Boolean | false
sumText | 合计行第一列的文本 | String | 合计
pageSizes | 每页显示个数选择器的选项设置 | Number[] | [10, 20, 50, 100, 200]
pageSize | 每页显示条目个数 | Number | 20
pageIndex | 当前页数 | Number | 1
pageTotal | 总条目数 | Number | 0
pageLayout | 组件布局,子组件名用逗号分隔 | String | "total, sizes, prev, pager, next, jumper"
reserveSelection | 仅对 isSelection=true 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key) | Boolean | false
selectable | 仅对 isSelection=true 的列有效,类型为 Function,Function(row, index) 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function | null
otherHeight| 其它高度 | Number | 0 (用于自动计算高度时,除查询条件高度后的其它高度)
isSearch | 是否显示查询按钮 | Boolean | true
isExpansion | 是否显示展开/收起按钮 | String | close 不显示:no 展开:open 收起:close
isReset | 是否显示重置按钮 | Boolean | true
isExpandAll | 是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效 | Boolean | false
isCurrentPage | 点击查询还是显示当前页 | Boolean | false 则传第一页,反正传分页选中的页码 注意:如果查询条件变了还是第一页
customQuery | 是否自定义查询 | Boolean | false 开启则在btnClick 事件里自定义查询方式,反正调用本身remote方法查询
showAllSize | 下拉页数是否添加全部条数选项 | Boolean | false 开启则下拉里有总条数选项
checkAllPage | 全选所有页数据选中,该属性是通过列表头部的全选控制(暂时只支持本地分页数据选中,服务器分页不支持) | Boolean | false
columnSetting | 是否显示列设置功能 | Boolean | false
tableFull | 是否显示全屏功能 | Boolean | false
highlightCurrentRow | 是否要高亮当前行 | Boolean | false
radioSelectable | 仅对 type=showRadio 的列有效,类型为 Function,Function 的返回值用来决定这一行的 Radio 是否可以勾选 | Boolean | false
useVirtual | 是否开启虚拟滚动 (解决大数据渲染卡顿问题),必须是page-type="no"同时设置height,要不没作用 | Boolean | false
treeProps | 树形配置 | Object | { hasChildren: "hasChildren", children: "children", checkStrictly: true(是否严格的遵守父子节点不互相关联)}
# searchItems Attributes(属性)
请看vzc-form的items属性
# searchButtons和listButtons Attributes(属性)
具体属性请查看vzc-button属性
# listItems Attributes(属性) 更多配置具体请看element官方文档的Table-column 属性
属性 | 说明 | 类型 | 默认值
isShow | 是否显示 | Boolean | true
children | 子表头 | Array | []
options | 数据集(用于列表值转文本显示) | Array || [] 格式[{key:"",value:""}]
# Method(方法)
方法名 | 说明 | 参数
reset | 重置数据 | params | [{Value:"值",Key:"字段",Operator:"操作符(Equal)"}]
setSearchValue | 设置查询值 | { key: "值" } key 等于searchItems项里面的key,多个逗号隔开
getSearchValue | 获取查询值 | 返回 Object对象
setSearchOptions | 设置选项集合 | 列子1:{key: "searchItems项里面的key",options: [],} 列子2:[{key: "searchItems项里面的key",options: []},{key: "searchItems项里面的key",options: []}]
getSelectDatas | 获取选中数据,当isSelection=true才有用 | { addData, delData,selectKeys }
setSelectDatas | 设置选中数据,当isSelection=true才有用 | [] rowKey设置的字段值
getUpperRow | 获取上一行数据 | 当前行数据不传默认第一行 同步方法,例子:this.$refs.vzcList.getUpperRow(this.currentData).then(resp => {this.currentData = resp;});
getNextRow | 获取下一行数据 | 当前行数据不传默认第一行 同步方法,例子:this.$refs.vzcList.getNextRow(this.currentData).then(resp => {this.currentData = resp;});
searchChange | 表单里组件值改变事件 | key,value
getPageIndex | 获取当前页码
setCheckAllPage | 全选所有页数据选中,该方法是在界面上新增一个全选功能,不是用列表上的全选。(暂时只支持本地分页数据选中,服务器分页不支持)
checkRow |当用户手动勾选数据行的 Checkbox 时触发的事件 selection,row,selectKeys
checkAll | 当用户手动勾选全选 Checkbox 时触发的事件 selection,selectKeys
rowChange |当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的 highlight-current-row 属性 currentRow, oldCurrentRow
# Events(事件)
事件名 | 说明 | 参数
btnClick | 按钮点击事件 | { code, label, file,row }
# Slot
事件名 | 说明 |参数
列名(prop) | 自定义列显示内容 | slot-scope="{ scope, config(对应templateColExt属性) }"
列名(prop)-header | 自定义列头显示内容 | slot-scope="{ scope, config(对应templateColExt属性) }"
列名(key)-search | 自定义搜索显示内容 | slot-scope="{ item }"
expandHtml | 展开行内容编辑
vzc-select-tree 下拉树
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
data | 树结构数据 | Array | []
defaultProps | 配置选项 | Object | {label: "name", value: "id", children: "children"}
multiple | 是否多选 | Boolean | false
clearable | 是否可清空选择 | Boolean | true
filterable | 是否可搜索 | Boolean | true
collapseTags | 配置多选时是否将选中值按文字的形式展示 | Boolean | false
nodeKey | 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 | String | "id"
checkStrictly | 显示复选框情况下,是否严格遵循父子不互相关联 | Boolean | false
defaultExpandAll | 是否默认展开所有节点 | Boolean | false
defaultExpandedKeys | 默认勾选的节点的 key 的数组 | Array | []
disabledChild | 当checkStrictly=true && multiple=true 时,是否选择了父级子集及子子集都禁用 | Boolean | false
# Events(事件)
事件名 | 说明 | 参数
change | 当选中节点变化时触发 | 选中节点的值,旧值
visible-change | 下拉框出现/隐藏时触发 | 出现则为 true,隐藏则为 false
remove-tag | 在多选模式下,移除Tag时触发 | 移除的Tag对应的节点的值
vzc-select-z-tree 下拉树集成ztree树,加载大数据
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
data | 树结构数据 | Array | []
treeConfig | 配置选项 | Object | {radioType: "level", chkStyle: "checkbox", name: "name", idKey: "key", pIdKey: "parentKey", children: "children", rootPId: 0}
multiple | 是否多选 | Boolean | false
clearable | 是否可清空选择 | Boolean | true
filterable | 是否可搜索 | Boolean | true
collapseTags | 配置多选时是否将选中值按文字的形式展示 | Boolean | false
checkStrictly | 显示复选框情况下,是否严格遵循父子不互相关联 | Boolean | false
disabledChild | 当multiple=true 时,是否选择了父级子集及子子集都禁用 | Boolean | false
# Events(事件)
事件名 | 说明 | 参数
change | 当选中节点变化时触发 | 选中节点的值,旧值
visibleChange | 下拉框出现/隐藏时触发 | 出现则为 true,隐藏则为 false
removeTag | 在多选模式下,移除Tag时触发 | 移除的Tag对应的节点的值
clear | 可清空的单选模式下用户点击清空按钮时触发
nodeClick | 节点点击事件 | 选中节点
nodeCheck | 在多选模式下,节点选择事件 | 选中节点
vzc-popup-select 弹出选择
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
type | 类型 | String | "input/dropdown/popover/button"
title | 标题 | String | ""
searchItems | 查询项集合 | Array | []
listItems | 列表项集合 | Array | []
isSelection | 是否多选 | Boolean | false
dataLoad | 数据 | Function, Array, Object | null Function(查看列子) Array([]) Object({ datas, total })
width | 宽度 | String | "70%"
height | 高度 | Number | 600
keyField | 指定作为键值的字段 | String | "id"
showField | 指定显示内容的字段 | String | "name"
color | 按钮显示样式 | String | "default"
collapseTags | 多选时是否将选中值按文字的形式展示 | Boolean | false
# Method(方法)
方法名 | 说明 | 参数 | 返回值
getSelectDatas | 获取选择数据 | 无 | {addData,delData}
# Events(事件)
事件名 | 说明 | 参数
confirm | 完成时间 | selectDatas
vzc-fold-card 折叠卡片
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
header | header,也可以通过 slot#header 传入 DOM | String | ""
footer | 设置 footer,也可以通过 slot#footer 传入 DOM | String | ""
height | 内容高度 | Number | 100
# Events(事件)
事件名 | 说明 | 参数
click | 按钮点击事件 | isExpand(是否展开)
vzc-img-cropper 图片裁剪
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
autoCropWidth | 截图框宽度 | Number | 320 设置0则不裁剪
autoCropHeight | 截图框高度 | Number | 180 设置0则不裁剪
showTip | 提示内容是否显示| Boolean | true
imageWidth | 图片显示宽度 | Number | 320
imageHeight | 图片显示高度 | Number | 180
uploadLoad | 图片上传方法 | Function(file(原文件),cropFile(裁剪文件)) | null 返回格式return new Promise((resolve, reject) => { resolve({url: ""});});
defaultUrl | 图片加载失败后显示的默认图片| String | ""
isCropper | 是否裁剪| Boolean | true 不裁剪就直接上传
accept | 图片格式| String | '.gif,.jpeg,.jpg,.png'
size | 文件大小| Number | 5 单位MB
headers | 设置上传的请求头部| Object |
params | 上传时附带的额外参数| Object |
vzc-browse-file 文件浏览组件
支持格式
视频:mp4
图片:png, gif, jpg, jpeg, ico, bmp
文档:doc,docm,docx,docxf,dot,dotm,dotx,epub,fodt,fb2,htm,html,mht,odt,oform,ott,oxps,pdf,rtf,txt,djvu,xml,xps,csv,fods,ods,ots,xls,xlsm,xlsx,xlt,xltm,xltx,fodp,odp,otp,pot,potm,potx,pps,ppsm,ppsx,ppt,pptm,pptx
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
fileName | 文件名 | String | ""
url | 文件地址 | String | ""
visible | 是否显示| Boolean | false
vzc-weather 天气
# Attributes(属性)
属性 | 说明 | 类型 | 默认值
config | 配置 | Object | 和风天气配置
vzc-z-tree 封装ztree
Attributes(属性)
Events(事件)
Method(方法)
4 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago