vue+element 二次组件封装:表单、列表、下拉树、弹出选择、折叠卡片等(持续更新npm依赖)
基于vue+element开发前端时,封装的一些组件,持续更新npm依赖,不喜勿喷
文章目录
-
- 安装
- 全局扩展方法
- 组件
-
-
- vzc-debounce 防抖组件
- vzc-button 按钮控件
- vzc-form 表单控件
- vzc-list 列表
- vzc-select-tree 下拉树控件
- vzc-popup-select 弹出选择控件
- vzc-fold-card 折叠卡片
- vzc-img-cropper 图片裁剪
- vzc-select-icon 图标
- vzc-browse-file 文件浏览组件
- vzc-icon 图标
-
- 讨论群
安装
npm地址
npm i vue-zeary-ctrlimport vueZearyCtrl from "vue-zeary-ctrl";//参数默认值{lang:'zh',messageDuration:3000}Vue.use(vueZearyCtrl);全局扩展方法
//全局加载层this.$vzcLoading(text, callback(loading));//全局Message 类型 success/warning/info/error,默认类型 infothis.$vzcMessage(message, type);//全局Alertthis.$vzcAlert(content, title, callback);//全局Confirmthis.$vzcConfirm(content, title, confirmCallback, cancelCallback);//全局Notification 类型 success/warning/info/error,默认success 位置 top-right/top-left/bottom-right/bottom-left,默认top-rightthis.$vzcNotify(message, title, type, position);//全局排序(支持对象数组，非对象只传第一个参数) datas:数据 col:列字段 type:类型 asc desclet datas = this.$vzcOrderBy(datas, col, type);//全局分组let datas = this.$vzcGroupBy(datas, function(item) { return item.字段 });//移除对象this.$vzcRemoveObj(Array, Object);//全局下载文件---文件流this.$vzcDownloadFile(data, filename);//字符串格式“字符串{0}{1}”.$vzcFormat(参数1,参数2)//数组去除重复的(支持对象数组）let datas = this.$vzcUnique(arr)//求两个集合的并集(支持对象数组）let datas = this.$vzcUnion(arr1，arr2)//求两个集合的补集(支持对象数组）let datas = this.$vzcComplement(arr1，arr2)//求两个集合的交集(支持对象数组）let datas = this.$vzcIntersect(arr1，arr2)//求两个集合的差集(支持对象数组，集合arr1中的数据不在arr2中的数据）let datas = this.$vzcMinus(arr1，arr2)//Tree数据转成Arraylet datas = this.$vzcTreeToArray(tree,key = "children",isDeleteChild = false,newArr = [])//Array数据转成Treelet datas = this.$vzcArrayToTree(arr,key = "id",parentKey = "parentId",parentValue = "")//对象复制let datas = this.$vzcCopyObj(obj)//日期格式 dateTime(Date对象,时间戳,不传当前时间) fmt 格式 "yyyy-MM-dd HH:mm:ss"let datas = this.$vzcDateUtil.formatDate(dateTime，fmt)//已知开始时间和结束时间 计算出所有日期let datas = this.$vzcDateUtil.getAllDate("2020-01-01", "2020-01-09")//当前日期let datas = this.$vzcDateUtil.getNowDay("yyyy-MM-dd HH:mm:ss")//本周的开始时间let datas = this.$vzcDateUtil.getStartDayOfWeek()//本周的结束时间let datas = this.$vzcDateUtil.getEndDayOfWeek()//本月的开始时间let datas = this.$vzcDateUtil.getStartDayOfMonth()//本月的结束时间let datas = this.$vzcDateUtil.getEndDayOfMonth()//近几个月开始日期 monthNum 月数 isTheDay 是否包含今天let datas = this.$vzcDateUtil.getStartDayOfLastMonth(monthNum, isTheDay)//近几天开始日期 day 正数：未来几天 负数：前几天let datas = this.$vzcDateUtil.getStartDayOfLastDay(day)//本月天数let datas = this.$vzcDateUtil.getMonthDays()//禁止浏览器后退，在需要禁止界面mounted里添加this.$vzcProhibitBack()//关闭或刷新网页出现提示,不同浏览器提示不一样，在app界面的mounted里添加this.$vzcLeaveReminder() //参数传false就是移除//界面添加水印this.$vzcWatermark('水印')//获取icon所有图标名称let datas = this.$vzcIcons()//获取URL参数值let datas = this.$vzcUrlParams(name)//前端解析excelthis.$vzcAnalysisExcel(file,callback)//数字金额转中文let datas = this.$vzcConvertCurrency(金额);//身份证:出生年月、性别、年龄 {"sex":"男","birthday":"1990-12-10","age":30}let datas = $vzcCalcIdentiyInfo("身份证");//秒转化成时分秒let datas =$vzcFormatSeconds(秒);//计算对象数组中某个属性合计let total = $vzcSumObj(集合,要计算的属性名);//Guidlet guid = $vzcGuid();// 通过子获取所有父级数据let arr = this.$vzcTreeParentPath(this.treeData, data=> data.key==="子ID","children")// 树形数据追加属性 const data = $vzcWalkTreeData(raw, (data, deep) => ({...data, itemStyle: { color: colors[deep]}}));const data = this.$vzcWalkTreeData(raw, (data, deep) => ({...data, itemStyle: { color: colors[deep]}}));//对象属性替换const data = this.$vzcCopyTrans(res, [{ key: "result", value: "data" }]) /*** * 防抖方法 * @param func 函数 * @param millisec 时间 * @param ifNow 是否立即执行 * @returns {function(...[*]=)} */const func = this.$vzcDebounce(func,300)/*** * 节流函数 * @param func 函数 * @param wait 时间 * @param options 参数 * @returns box.onmousemove = throttle(getMessgee, 1000); */const data = this.$vzcThrottle(getMessgee, 1000, { leading: false, trailing: false })/** * 树形数据生成序号-主要用于table树形数据验证看下图 */this.$vzcSetTreeIndex(树形数据)/** * 递归搜索树形列表数据,要求输入框搜索 '文字'，希望树形结构中带有 “文字” 字的项显示，即使父节点没有，但子节点含有，父节点仍要返回。 * @param arr 树形数据 * @param filterFunc 过滤方法(data) => { return (data.officeName.toUpperCase().indexOf(this.filterText.toUpperCase()) > -1)} * @param children 子集字段 */const treeData = this.$vzcSearchTreeData(树形数据,(data) => { return (data.officeName.toUpperCase().indexOf(this.filterText.toUpperCase()) > -1)},"children");先设置树形数据的序号$vzcSetTreeIndex(treeDatas)再在table里面获取树形数据生成序号 prop="name"label="姓名"sortablewidth="180"> 深度优先：{{`rows.${row.path}.name`}} 
组件
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/circleicon | 图标 | String | "" 默认支持vzc-icon图标名称，其它图标通过slot实现loading | 加载状态 | Boolean | falseupload | 是否上传 | Boolean | false (废除使用buttonMode)customClass | 自定义样式 | String | ""buttonMode | 按钮模式 | String | "default" default：默认 import:导入按钮# Events（事件）事件名 | 说明 | 参数click | 按钮点击事件 | { code, label, file }# Slot事件名 | 说明 | 参数icon | 自定义图标# 列子<vzc-button label="列子" type="primary" icon="car" > </vzc-button><vzc-button label="列子" type="primary" > <i slot="icon" class="el-icon-eleme"></i></vzc-button>vzc-form 表单控件
# Attributes（属性）属性 | 说明 | 类型 | 默认值labelPosition | 表单域标签的位置 right/left/top | String | "right"labelWidth | 表单域标签的宽度 | String | "100px"items | 项集合 | Array | []buttons | 按钮集合 | Array | []buttonAlign | 按钮集合位置 right/left/center | String | "right"loading | 加载状态 | Boolean | falseisSearch | 是否添加查询按钮 | Boolean | falsesearchButton | 查询按钮配置 | Object | {code: "BtnSearch",label: "查询",icon: "el-icon-search",type: "success"}# items Attributes（属性） 以下是自定义属性,其它属性可以参考对应组件属性一样可以用属性 | 说明 | 类型 | 默认值type | 类型(radio/checkbox/input/number/select/cascader/switch/slider/time/date/datetime/rate/color/avatar/upload/selecttree/selectpopup) | String | ""subtype| 子类型input(password/textarea)time(timerange)date(year/month/date/dates/week/datetime/datetimerange/daterange/monthrange) upload(text/picture/picture-card) |String| ""key | 字段 | String | ""label | 名称 | String | ""value | 默认值 | String | ""operator | 过滤操作符 | String | "Equal" 按照自己系统定义min | 最小值 | Number | 1max | 最大值 | Number | 2precision | 数值精度 | Number | 0step | 计数器步长 | Number | 1multiple | 是否多选 | Boolean | falsecollapseTags | 多选时是否将选中值按文字的形式展示 | Boolean | falsecheckStrictly | 多选时是否选中任意节点 | Boolean | falsevalueFormat | 绑定值的格式 | String | ""isRange | 是否区间 | String | ""filter | 是否可搜索| Boolean | falseisGroup| 是否分组 | Boolean | falsebutton | 是否按钮模式(radio/checkbox) | Boolean | falseplaceholder| 输入框占位文本 | String | ""rules| 表单验证规则 | Array | []options| 选项集合 | Array | []props | 配置选项 | Object | {key: "key",value: "value",children: "children",disabled: false}span | 栅格占据的列数 | Number | 8url | url | String | ""accept | 文件类型 | String | ""resultFormat | 返回结果格式化 | Function | null function(result,file)fileSize | 文件大小 | Number | 2pickerOptions|当前时间日期选择器特有的选项参考下表| Object | {}color | 颜色 | String,Array | 类型为 rate(["#99A9BF", "#F7BA2A", "#FF9900"]) upload("default")# buttons Attributes（属性）具体属性请查看lzg-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# 列子 <vzc-form ref="form" :items="items" label-width="100px"></vzc-form> items: [ { type: "radio", key: "单选框", label: "单选框", value: 0, options: [ { key: 0, value: "单" }, { key: 1, value: "选" } ] }, { type: "checkbox", key: "多选框", label: "多选框", value: [0], options: [ { key: 0, value: "多" }, { key: 1, value: "选" }, { key: 2, value: "框" } ] }, { type: "input", key: "文本框", label: "文本框", value: "", rules: [{ required: true, message: "请输入", trigger: "blur" }] }, { type: "input", subtype: "textarea", key: "文本域", label: "文本域", value: "", placeholder: "", min: 0, max: 200, span: 24 }, { type: "number", key: "整型", label: "整型", value: 0, step: 2, min: 0, max: 200 }, { type: "number", key: "浮点型", label: "浮点型", value: 0, precision: 2, min: 0, max: 200 }, { type: "select", key: "下拉单选", label: "下拉单选", value: null, options: [ { key: 0, value: "下" }, { key: 1, value: "拉" }, { key: 2, value: "单" }, { key: 3, value: "选" } ] }, { type: "select", key: "下拉多选", label: "下拉多选", value: null, multiple: true, options: [ { key: 0, value: "下" }, { key: 1, value: "拉" }, { key: 2, value: "多" }, { key: 3, value: "选" } ] }, { type: "select", key: "下拉分组", label: "下拉分组", value: null, min: 0, max: 2, isGroup: true, props: { key: "value", value: "label" }, options: [ {label: "热门城市",options: [ { value: "Shanghai", label: "上海" }, { value: "Beijing", label: "北京" }] }, {label: "城市名",options: [ { value: "Chengdu", label: "成都" }, { value: "Shenzhen", label: "深圳" }, { value: "Guangzhou", label: "广州" }, { value: "Dalian", label: "大连" }] } ] }, { type: "cascader", key: "级联选择", label: "级联选择", value: null, multiple: true, collapseTags: true, options: [ {key: "zhinan",value: "指南",children: [ { key: "shejiyuanze", value: "设计原则", children: [ { key: "yizhi", value: "一致" }, { key: "fankui", value: "反馈" }, { key: "xiaolv", value: "效率" }, { key: "kekong", value: "可控" } ] }, { key: "daohang", value: "导航", children: [ { key: "cexiangdaohang", value: "侧向导航" }, { key: "dingbudaohang", value: "顶部导航" } ] }] } ] }, { type: "switch", key: "switch按钮", label: "switch按钮", value: 0 }, { type: "slider", key: "滑块", label: "滑块", value: 0, span: 16 }, { type: "time", key: "时间", label: "时间", value: "" }, { type: "time", subtype: "timerange", key: "时间段", label: "时间段", valueFormat: "HH:mm:ss", value: [] }, { type: "date", key: "日期", label: "日期", valueFormat: "yyyy-MM-dd", value: "" }, { type: "date", subtype: "year", key: "年", label: "年", value: "", valueFormat: "yyyy" }, { type: "date", subtype: "month", key: "月", label: "月", value: "", valueFormat: "yyyy-MM" }, { type: "date", subtype: "dates", key: "多个日期", label: "多个日期", valueFormat: "yyyy-MM-dd", value: "" }, { type: "date", subtype: "daterange", key: "日期段", label: "日期段", valueFormat: "yyyy-MM-dd", value: [] }, { type: "date", subtype: "datetime", key: "日期时间", label: "日期时间", valueFormat: "yyyy-MM-dd HH:mm:ss", value: "" }, { type: "date", subtype: "datetimerange", key: "日期时间段", label: "日期时间段", valueFormat: "yyyy-MM-dd HH:mm:ss", value: [] }, { type: "rate", key: "评分", label: "评分", value: 0 }, { type: "color", key: "颜色", label: "颜色", value: null }, { type: "avatar", key: "头像", label: "头像", value: "", url: "http://localhost:8080/", accept: ".jpeg,.jpg,.png", resultFormat: (result, file) => { return result.data.url; } }, { type: "upload", subtype: "text", key: "文件上传", label: "文件上传", color: "primary", value: [ {name: "food.jpeg",url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" }, {name: "food2.jpeg",url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" } ], multiple: false, max: 1, url: "http://localhost:8080/", accept: ".doc,.xls,.docx,.xlsx", resultFormat: (result, file) => { return file; } }, { type: "selecttree", key: "下拉多选树", label: "下拉多选树", value: null, multiple: true, collapseTags: false, props: { key: "id", value: "name" }, options: [ {id: "love",name: "所有和你走过的风光",children: [ { id: 1, name: "海边", children: [ { id: 5, name: "蓬莱" } ] }, { id: 2, name: "森林" }, { id: 3, name: "草原" }, { id: 4, name: "古城" }] } ] }, { type: "selectpopup", subtype: "input", key: "弹出选择", label: "弹出选择", value: null, color: "primary", searchItems: [ {type: "input",key: "title",label: "名称",value: "" }, {type: "select",key: "type",label: "类型",value: null,options: [ { key: 0, value: "类型1" }, { key: 1, value: "类型2" }, { key: 2, value: "类型3" }, { key: 3, value: "类型4" }] }, {type: "select",key: "status",label: "状态",value: null,options: [ { key: 0, value: "状态1" }, { key: 1, value: "状态2" }, { key: 2, value: "状态3" }, { key: 3, value: "状态4" }] }, {type: "date",subtype: "daterange",key: "daterange",label: "日期段",valueFormat: "yyyy-MM-dd",value: [] }, {type: "cascader",key: "cascader1,cascader2,cascader3",label: "级联选择",value: null,multiple: true,checkStrictly: true,options: [ { key: "zhinan", value: "指南", children: [ { key: "shejiyuanze", value: "设计原则", children: [ { key: "yizhi", value: "一致" }, { key: "fankui", value: "反馈" }, { key: "xiaolv", value: "效率" }, { key: "kekong", value: "可控" } ] }, { key: "daohang", value: "导航", children: [ { key: "cexiangdaohang", value: "侧向导航" }, { key: "dingbudaohang", value: "顶部导航" } ] } ] }] } ], listItems: [ { prop: "id", label: "id" }, { prop: "uuid", label: "uuid" }, { prop: "title", label: "title" }, { prop: "author", label: "author" }, {prop: "switch",label: "switch",templateHtml: '' }, {prop: "status",label: "status" }, { prop: "type", label: "type" } ], showField: "title", multiple: true, dataLoad: function(vue, params) { let datas = [{ uuid: "5DAA86F8-F77e-FfbB-CE5D-3e76b0F6cB1d", id: "650000201311181657", title: "性。", status: 0, type: 1, author: "田秀兰", datetime: "1998-08-19 18:55:28", pageViews: 3448, switch: false, percent: 95},{ uuid: "5A53Ede7-7C59-D3E4-EdE1-3Aa3EFB3cEf4", id: "130000200507260502", title: "团。", status: 1, type: 1, author: "傅杰", datetime: "1987-05-21 03:33:22", pageViews: 1265, switch: false, percent: 88} ]; return new Promise((resolve, reject) => {resolve({ datas: datas, total: datas.length }); }); } }, { type: "selecticon", key: "图标选择器", label: "图标选择器", value: "", } ]vzc-list 列表
# Attributes（属性） 更多配置具体请看element官方文档的table属性及vzc-form属性属性 | 说明 | 类型 | 默认值searchItems | 查询项集合 | Array | []searchButtonType | 查询按钮样式 | String |"default"searchExpansion | 查询条件默认展开还是收起 | Boolean |faslesearchButtons | 查询按钮集合 | Array | []listItems | 列表项集合 | Array | []listButtons | 列表按钮集合 | Array | []pageType | 分页类型 | String | "server" no(不分页)/server(服务器分页)/local(本地分页)isSelection | 是否多选 | Boolean | falsedefaultConditions | 默认查询条件 | Array | null [{Value:"值",Key:"字段",Operator:"操作符(Equal)"}]disabled | 是否禁用 | Boolean | falsebtnShowEvent | 操作列按钮显示判断 | Function | null function({ btn, row})defaultDataLoad | 是否第一次加载数据 | Boolean | truedataLoad | 数据 | 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 | falseoperFixed | 操作列位置 | String | rightoperType | 操作列样式 | String | icon (link,button,icon,dropdown)operWidth | 操作列宽度 | Number | 0 不设置自适应operFontWidth | 操作列每个文字的宽度 | Number | 0 自适应宽度时候，因框架样式问题可能显示不对时则需设置isSearch | 是否添加查询按钮 | Boolean | trueshowSummary | 是否在表尾显示合计行 | Boolean | falsesumText | 合计行第一列的文本 | String | 合计pageSizes | 每页显示个数选择器的选项设置 | Number[] | [10, 20, 50, 100, 200]pageSize | 每页显示条目个数 | Number | 20pageIndex | 当前页数 | Number | 1pageTotal | 总条目数 | Number | 0pageLayout | 组件布局，子组件名用逗号分隔 | String | "total, sizes, prev, pager, next, jumper"reserveSelection | 仅对 isSelection=true 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key) | Boolean | falseselectable | 仅对 isSelection=true 的列有效，类型为 Function，Function(row, index) 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function | nullotherHeight| 其它高度 | Number | 0 (用于自动计算高度时,除查询条件高度后的其它高度)isQueryExpansion | 查询按钮显示模式(true 带展开及收缩 false 不带展开及收缩) | Boolean | trueisExpandAll | 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 | Boolean | falseisCurrentPage | 点击查询还是显示当前页 | Boolean | false 则传第一页，反正传分页选中的页码 注意：如果查询条件变了还是第一页customQuery | 是否自定义查询 | Boolean | false 开启则在btnClick 事件里自定义查询方式,反正调用本身remote方法查询showAllSize | 下拉页数是否添加全部条数选项 | Boolean | false 开启则下拉里有总条数选项checkAllPage | 全选所有页数据选中,该属性是通过列表头部的全选控制(暂时只支持本地分页数据选中，服务器分页不支持) | Boolean | false# searchItems Attributes（属性）请看vzc-form的items属性# searchButtons和listButtons Attributes（属性）具体属性请查看vzc-button属性# listItems Attributes（属性） 更多配置具体请看element官方文档的Table-column 属性属性 | 说明 | 类型 | 默认值isShow | 是否显示 | Boolean | truechildren | 子表头 | 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 }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,valuegetPageIndex | 获取当前页码setCheckAllPage | 全选所有页数据选中,该方法是在界面上新增一个全选功能，不是用列表上的全选。(暂时只支持本地分页数据选中，服务器分页不支持)checkRow|当用户手动勾选数据行的 Checkbox 时触发的事件selection,row,selectKeyscheckAll| 当用户手动勾选全选 Checkbox 时触发的事件selection,selectKeysrowChange |当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 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属性） }"列名（prop）-search | 自定义搜索显示内容 | slot-scope="{ item }"#列子 <vzc-list ref="vzcList" :loading="loading" :search-items="listConfig.searchItems" search-button-type="primary" :search-buttons="listConfig.searchButtons" :list-items="listConfig.listItems" :list-buttons="listConfig.listButtons" :btn-show-event="listConfig.btnShowEvent" :template-col-ext="listConfig.templateColExt" :oper-type="listConfig.operType" :data-load="listDataLoad" :show-summary="true" :summary-method="getSummaries" :is-query-expansion="false" class="customList" @btnClick="btnClick" @cell-click="cellClick" ><div slot="switchSlot" slot-scope="{ scope, config }"> <el-switch v-model.trim="scope.row.status" :active-value="0" :inactive-value="1" @change="config.statusChange(scope.row)" ></el-switch> slot </div></vzc-list>export default { name: "List", data: function() { return { loading: false, listConfig: { operType: "dropdown", searchButtons: [ { code: "BtnAdd", label: "新增", icon: "", sort: 1, type: "primary" }, { code: "BtnSetValue", label: "设置默认值", icon: "", sort: 2, type: "primary" }, { code: "BtnSetOneOpt", label: "下拉值单个设置", icon: "", sort: 3, type: "primary" }, { code: "BtnSetOpt", label: "下拉值批量设置", icon: "", sort: 4, type: "primary" }, { code: "BtnDownload", label: "下载", icon: "", sort: 4, type: "primary" }, { code: "BtnImport", label: "导入", icon: "", sort: 5, type: "primary", isUpload: true }, { code: "BtnExport", label: "导出", icon: "", sort: 6, type: "primary" }, { code: "BtnUp", label: "上一条数据", icon: "arrowup", sort: 7, type: "primary" }, { code: "BtnDown", label: "下一条数据", icon: "arrowdown", sort: 8, type: "primary" } ], searchItems: [ { type: "input", key: "title", label: "名称", value: "。" }, { type: "select", key: "type", label: "类型", value: null, options: [{ key: 0, value: "类型1" },{ key: 1, value: "类型2" },{ key: 2, value: "类型3" },{ key: 3, value: "类型4" } ] }, { type: "select", key: "status", label: "状态", value: null, options: [{ key: 0, value: "状态1" },{ key: 1, value: "状态2" },{ key: 2, value: "状态3" },{ key: 3, value: "状态4" },{ key: 4, value: "状态5" } ] }, { type: "date", subtype: "daterange", key: "daterange", label: "日期段", valueFormat: "yyyy-MM-dd", value: [] }, { type: "date", subtype: "daterange", key: "daterange", label: "日期段", valueFormat: "yyyy-MM-dd", value: [] }, { type: "cascader", key: "cascader", label: "级联选择", value: null, multiple: true, checkStrictly: true, options: [{ key: "zhinan", value: "指南", children: [ { key: "shejiyuanze", value: "设计原则", children: [ { key: "yizhi", value: "一致" }, { key: "fankui", value: "反馈" }, { key: "xiaolv", value: "效率" }, { key: "kekong", value: "可控" } ] }, { key: "daohang", value: "导航", children: [ { key: "cexiangdaohang", value: "侧向导航" }, { key: "dingbudaohang", value: "顶部导航" } ] } ]} ] } ], listButtons: [ { code: "BtnEdit", label: "修改", icon: "", sort: 2, type: "primary" }, { code: "BtnDelete", label: "删除", icon: "delete", sort: 3, type: "primary" } ], listItems: [ { prop: "uuid", label: "uuid" }, { prop: "title", label: "title" }, { prop: "author", label: "author" }, { prop: "switchSlot", label: "switchSlot", isCustomCol: true }, { prop: "switchHtml", label: "switchHtml", isCustomCol: true, templateHtml:'Html' } // { // prop: "switch", // label: "switch", // templateHtml: // '' // }, // { // label: "一级表头", // children: [ // { //prop: "switch", //label: "switch", //templateHtml: // '' // }, // { //label: "二级表头", //children: [ // { // prop: "status", // label: "status" // }, // { prop: "type", label: "type" } //] // } // ] // } ], btnShowEvent: function(param) { switch (param.btn.code) { case "BtnEdit":if (param.row.status === 0) { return false;}break; } return true; }, templateColExt: { statusChange: this.statusChange } }, datas: [ { uuid: "5DAA86F8-F77e-FfbB-CE5D-3e76b0F6cB1d", id: "650000201311181657", title: "性。", status: 0, type: 1, author: "田秀兰", datetime: "1998-08-19 18:55:28", pageViews: 3448, switch: false, percent: 95 }, { uuid: "5A53Ede7-7C59-D3E4-EdE1-3Aa3EFB3cEf4", id: "130000200507260502", title: "团。", status: 1, type: 1, author: "傅杰", datetime: "1987-05-21 03:33:22", pageViews: 1265, switch: false, percent: 88 }, { uuid: "1C3E2192-1Ca1-D67f-d6aF-bB2653f783eE", id: "140000197707308854", title: "界。", status: 1, type: 1, author: "崔秀英", datetime: "2005-08-15 08:11:21", pageViews: 4126, switch: true, percent: 88 }, { uuid: "62B5f38E-DBEB-cFf6-5F86-358CA6bC32db", id: "820000201904084897", title: "且。", status: 1, type: 1, author: "萧勇", datetime: "2010-05-20 00:58:47", pageViews: 2506, switch: false, percent: 97 }, { uuid: "5dEF89D6-8e2C-1922-bCcA-1d0Cecc3E2B8", id: "620000198807284449", title: "集。", status: 1, type: 4, author: "蒋平", datetime: "1993-06-11 15:04:03", pageViews: 1137, switch: false, percent: 84 }, { uuid: "CfECBeF9-1948-46DE-4Fd7-aF2d6F2c2393", id: "110000198409244409", title: "合求。", status: 1, type: 1, author: "雷霞", datetime: "2017-07-16 00:36:19", pageViews: 4360, switch: false, percent: 85 }, { uuid: "DdeDcb2A-0FbF-1Ed4-6FFf-ef9B1c7328Be", id: "440000200508261294", title: "识斗。", status: 1, type: 1, author: "张涛", datetime: "1981-07-25 15:52:06", pageViews: 370, switch: false, percent: 93 }, { uuid: "d56CEfd6-eA3f-AF31-A5bC-f5EB3fE3c2f4", id: "310000200902124061", title: "常。", status: 1, type: 2, author: "曾霞", datetime: "1992-03-31 15:26:01", pageViews: 4959, switch: false, percent: 88 }, { uuid: "E62A2c0a-45d3-Eb1B-6EDb-d17195e1c25c", id: "340000199902186238", title: "合。", status: 1, type: 0, author: "方强", datetime: "2003-10-20 13:06:03", pageViews: 4640, switch: false, percent: 85 }, { uuid: "2B0A512C-E10A-B4ce-cC1e-58fc3e13f6d6", id: "64000019921113216X", title: "会间。", status: 1, type: 4, author: "易平", datetime: "1975-04-06 23:44:49", pageViews: 397, switch: true, percent: 94 }, { uuid: "AbdAe5dd-8bb6-9612-75AE-218D71b7AFAe", id: "360000198405258615", title: "委。", status: 1, type: 3, author: "段强", datetime: "1996-02-26 05:24:16", pageViews: 425, switch: true, percent: 91 }, { uuid: "2FA86dD8-E81F-5f9F-0Ac3-a5B9b9e2411c", id: "420000198703055679", title: "完还。", status: 1, type: 4, author: "文霞", datetime: "2018-12-01 13:01:09", pageViews: 3043, switch: false, percent: 97 }, { uuid: "49bDfdC4-B6D6-cd8d-b5dA-A9b3DA5822B3", id: "340000198603255833", title: "直走。", status: 1, type: 3, author: "常磊", datetime: "1992-07-13 08:59:10", pageViews: 2034, switch: false, percent: 97 }, { uuid: "4Bb1eFba-646C-EecD-EAd3-0be7ac50846b", id: "120000198006122783", title: "人。", status: 1, type: 3, author: "赖磊", datetime: "2015-08-30 14:17:37", pageViews: 4228, switch: true, percent: 94 }, { uuid: "FB9DD3cc-06DC-A4fb-CBF4-cB74C08b7F63", id: "510000198909140694", title: "更一。", status: 0, type: 3, author: "张强", datetime: "2014-07-21 02:12:21", pageViews: 3311, switch: true, percent: 93 }, { uuid: "2fee5ACC-e1eA-4414-18e3-9BC93f2D8A81", id: "640000198205032432", title: "通。", status: 1, type: 4, author: "曹刚", datetime: "1992-05-23 17:45:55", pageViews: 975, switch: false, percent: 90 }, { uuid: "7Dbb8Ee3-6fCF-dBEd-af3c-D67616EAcF29", id: "220000200003086733", title: "府。", status: 1, type: 3, author: "贾刚", datetime: "1999-05-12 01:41:38", pageViews: 1453, switch: false, percent: 97 }, { uuid: "2f3EC795-D029-6B2A-f27d-Bf400dDaA740", id: "230000198209302210", title: "共除。", status: 1, type: 2, author: "崔娜", datetime: "1982-06-08 17:27:36", pageViews: 494, switch: false, percent: 89 }, { uuid: "Dbb6F44a-0dDf-fd4d-EAee-Bd63A535dFfe", id: "440000197012061366", title: "重。", status: 0, type: 2, author: "廖秀兰", datetime: "1972-01-02 04:28:58", pageViews: 1873, switch: true, percent: 98 }, { uuid: "E339fE2F-FC9d-E1c5-af3D-1aA36e35AA5C", id: "11000020150628719X", title: "阶。", status: 1, type: 1, author: "段艳", datetime: "1973-12-06 21:30:59", pageViews: 2428, switch: true, percent: 97 } ], currentData: null }; }, methods: { statusChange(row) { console.log("点击了按钮switch"); }, getSummaries(param) { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = "总价"; return; } if (index === 4 || index === 5) { const values = data.map(item => Number(item[column.property])); sums[index] = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) {return prev + curr; } else {return prev; } }, 0); } }); return sums; }, btnClick: function(param) { this.loading = true; switch (param.code) { case "BtnEdit": param.row.title = "编辑数据"; this.$refs.vzcList.reset(); break; case "BtnDelete": break; case "BtnSetValue": this.$refs.vzcList.setSearchValue({ title: "动态设置值" }); console.log("设置名称默认值"); break; case "BtnSetOneOpt": this.$refs.vzcList.setSearchOptions({ key: "type", options: [{ key: 0, value: "单个动态类型1" },{ key: 1, value: "单个动态类型2" } ] }); console.log("单个设置类型下拉值"); break; case "BtnSetOpt": this.$refs.vzcList.setSearchOptions([ {key: "status",options: [ { key: 0, value: "批量动态状态1" }, { key: 1, value: "批量动态状态2" }] }, {key: "type",options: [ { key: 0, value: "批量动态类型1" }, { key: 1, value: "批量动态类型2" }] } ]); console.log("批量设置类型、状态下拉值"); break; case "BtnUp": this.$refs.vzcList.getUpperRow(this.currentData).then(resp => { if (resp) {this.currentData = resp;this.$vzcMessage(JSON.stringify(this.currentData)); } else {this.$vzcMessage("已到顶部"); } }); break; case "BtnDown": this.$refs.vzcList.getNextRow(this.currentData).then(resp => { if (resp) {this.currentData = resp;this.$vzcMessage(JSON.stringify(this.currentData)); } else {this.$vzcMessage("已到低部"); } }); break; } this.$vzcNotify("点击了按钮:" + param.label); this.loading = false; }, listDataLoad: function(vue, params) { //如果不用params.conds查询条件格式,还可以这么获取表单查询条件 let formParams = vue.getSearchValue(); switch (vue.pageType) { case "no": case "local": return new Promise((resolve, reject) => { resolve({ datas: this.datas }); }); break; case "server": const { conds = [], pageIndex = 1, pageSize = 20 } = params; let mockList = this.datas.filter(item => { if (conds.length > 0 && item.title.indexOf(conds[0].Value) < 0)return false; return true; }); const pageList = mockList.filter( (item, index) =>index < pageSize * pageIndex &&index >= pageSize * (pageIndex - 1) ); return new Promise((resolve, reject) => { resolve({ datas: pageList, total: mockList.length }); }); break; } }, cellClick: function(row, column, cell, event) { row.title = "点击了单元格"; } }};vzc-select-tree 下拉树控件
属性 | 说明 | 类型 | 默认值 data | 树结构数据 | Array | []defaultProps | 配置选项 | Object | {label: "name", value: "id", children: "children"}multiple | 是否多选 | Boolean | falseclearable | 是否可清空选择 | Boolean | truefilterable | 是否可搜索 | Boolean | falsecollapseTags | 配置多选时是否将选中值按文字的形式展示 | Boolean | falsenodeKey | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | "id"checkStrictly | 显示复选框情况下，是否严格遵循父子不互相关联 | Boolean | falsedefaultExpandAll | 是否默认展开所有节点 | Boolean | falsedefaultExpandedKeys | 默认勾选的节点的 key 的数组 | Array | []# 列子 <vzc-select-tree v-model="selectTreeValue" :data="selectTreeOptions" :multiple="true" :default-props="selectTreeDefaultProps"></vzc-select-tree> // 数据默认字段 selectTreeDefaultProps: { label: "name", value: "id", children: "children", }, // 数据列表 selectTreeOptions: [ { id: "love", name: "所有和你走过的风光", children: [ {id: 1,name: "海边",children: [ { id: 5, name: "蓬莱", },], }, {id: 2,name: "森林", }, {id: 3,name: "草原", }, {id: 4,name: "古城", }, ], }, ],vzc-popup-select 弹出选择控件
Attributes（属性）属性 | 说明 | 类型 | 默认值type | 类型 | String | "input/dropdown/popover"title | 标题 | String | ""searchItems | 查询项集合 | Array | []listItems | 列表项集合 | Array | []isSelection | 是否多选 | Boolean | falsedataLoad | 数据 | Function, Array, Object | null Function(查看列子) Array([]) Object({ datas, total })width | 宽度 | String | "70%"height | 高度 | Number | 600keyField | 指定作为键值的字段 | String | "id"showField | 指定显示内容的字段 | String | "name"color | 按钮显示样式 | String | "default"#列子 <vzc-popup-select v-model="popupSelectValue" :search-items="popupSelectConfig.searchItems" :list-items="popupSelectConfig.listItems" show-field="title" :is-selection="true" :data-load="popupSelectDataLoad"></vzc-popup-select> popupSelectConfig: { searchItems: [ { type: "input", key: "title", label: "名称", value: "", }, { type: "select", key: "type", label: "类型", value: null, options: [{ key: 0, value: "类型1" },{ key: 1, value: "类型2" },{ key: 2, value: "类型3" },{ key: 3, value: "类型4" }, ], }, { type: "select", key: "status", label: "状态", value: null, options: [{ key: 0, value: "状态1" },{ key: 1, value: "状态2" },{ key: 2, value: "状态3" },{ key: 3, value: "状态4" }, ], }, { type: "date", subtype: "daterange", key: "daterange", label: "日期段", valueFormat: "yyyy-MM-dd", value: [], }, { type: "cascader", key: "cascader1,cascader2,cascader3", label: "级联选择", value: null, multiple: true, checkStrictly: true, options: [{ key: "zhinan", value: "指南", children: [ { key: "shejiyuanze", value: "设计原则", children: [ { key: "yizhi", value: "一致" }, { key: "fankui", value: "反馈" }, { key: "xiaolv", value: "效率" }, { key: "kekong", value: "可控" }, ], }, { key: "daohang", value: "导航", children: [ { key: "cexiangdaohang", value: "侧向导航" }, { key: "dingbudaohang", value: "顶部导航" }, ], }, ],}, ], }, ], listItems: [ { prop: "id", label: "id" }, { prop: "uuid", label: "uuid" }, { prop: "title", label: "title" }, { prop: "author", label: "author" }, { prop: "switch", label: "switch", templateHtml:'', }, { prop: "status", label: "status", }, { prop: "type", label: "type" }, ], }, popupSelectDataLoad: function (vue, params) { return new Promise((resolve, reject) => { this.$store.dispatch("list/getList", params).then( (resp) => { resolve({ datas: resp.datas, total: resp.total }); }, (resp) => { reject(resp); } ); }); },vzc-fold-card 折叠卡片
# Attributes（属性）属性 | 说明 | 类型 | 默认值header | header，也可以通过 slot#header 传入 DOM | String | ""footer | 设置 footer，也可以通过 slot#footer 传入 DOM | String | ""showLabel | 底部文本-显示 | String | "显示"hideLabel | 底部文本-隐藏 | String | "隐藏"height | 内容高度 | Number | 100# Events（事件）事件名 | 说明 | 参数click | 按钮点击事件 | isExpand(是否展开)vzc-img-cropper 图片裁剪
# Attributes（属性）属性 | 说明 | 类型 | 默认值autoCropWidth | 截图框宽度 | Number | 320autoCropHeight | 截图框高度 | Number | 180fixedBox | 固定截图框大小 | Boolean | falseshowTip | 提示内容是否显示| Boolean | trueimageWidth | 裁剪后图片显示宽度 | Number | 320imageHeight | 裁剪后图片显示高度 | Number | 180uploadLoad | 裁剪后图片上传方法 | Function(file(原文件),cropFile(裁剪文件)) | null 返回格式return new Promise((resolve, reject) => { resolve({url: ""});});defaultUrl | 图片加载失败后显示的默认图片| String | ""isCropper | 是否裁剪| Boolean | true 不裁剪就直接上传accept | 图片格式| String | '.gif,.jpeg,.jpg,.png'size | 文件大小| Number | 5vzc-select-icon 图标
列子vzc-browse-file 文件浏览组件
支持格式视频：mp4图片：png, gif, jpe, jpge, ico文档：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文件名称url | 文件地址 | String | ""visible | 是否显示| Boolean | falsevzc-icon 图标
# Attributes（属性）属性 | 说明 | 类型 | 默认值icon | 编码 | String | ""size | 大小 | Number | 12可以通过let datas = this.$vzcIcons()获取所有图标名称
# Attributes（属性）属性 | 说明 | 类型 | 默认值 icon | 编码 | String | ""size | 大小| Number| 12讨论群
如果您感觉该文章对您有帮助，那就打赏一下吧，请笔者喝杯奶茶！
