分类：iview

2021
10-15

iview 权限管理的实现

目录iview-admin2.0自带的权限管理根据权限控制组件展示自定义auth指令自定义auth组件总结iview-admin2.0自带的权限管理iview-admin2.0自带权限管理，可以通过设置路由的meta对象的参数access来分配权限。默认的角色是super_admin和admin，现在我们给文档这个侧边栏项目分配一个只有user才能查看的权限{path:'',name:'doc',meta:{title:'文档',href:'https://lison16.github.io/iview-admin-doc/#/... 继续阅读 >

2021
09-14

Vue + iView实现Excel上传功能的完整代码

1、HTML部分<Colspan="2">上传文件：</Col><Colspan="22"class="uploadExcelBox"><Uploadref="uploadExcel":loading="uploadLoading":action="uploadFileUrl"accept="xlsx,xls":format="uploadFormat":before-upload="beforeImgFile":on-success="successImgFile":on-error="errorImgFile":show-upload-list="true"><Buttontype="success">上传附件</Button></Upload><divv-if="uploadingFile!... 继续阅读 >

2021
01-10

iview实现动态表单和自定义验证时间段重叠

动态添加表单项iview的动态添加表单很简单，只需设置好表单项为一个array，添加新项目的时候就push一个默认好的值，剩下的iview会帮你做好。<templatelang="html"><divclass=""><Formref="formValidate":model="formValidate":rules="rulesValidate":label-width="100":label-colon="true"><FormItemv-for="(item,index)informValidate.showTimeDurations":key="index"... 继续阅读 >

2020
11-19

vue+iview实现文件上传

vue+iview文件上传（base64编码、类型验证、大小限制、多文件上传及文件预览）​iview对文件上传提供了一个专门的标签Upload，不过这个标签默认需要一个接口action属性，但一般我们向后台上传文件并不会选择文件直接就上传了而是需要和其他的值一起发送请求给后台，并且文件都是转成base64编码。iview提供了一个方法阻止默认上传：before-upload这个方法是在上传文件之前做的一些操作，当这个方法返回false表示手动上传，不... 继续阅读 >

2020
11-19

vue+iview实现分页及查询功能

vue+iview分页及删、查功能实现首先要想实现分页功能必须得知道当前页码、每页大小、总数目。iview对分页的功能支持还是很强大的，有很多钩子函数具体实现看后端返回的数据<template><divv-if="this.$store.state.user.userType==0||this.$store.state.user.userType==1"><Inputtype="text"searchenter-buttonplaceholder="根据施工人员姓名查找"v-model="peopleName"@input="search"/><Tablewidth="100%":c... 继续阅读 >

2020
11-19

vue+iview分页组件的封装

vue+iview的分页组件封装1.在components中创建pagination文件夹，接着创建src，index.js,index.less文件2.index.less文件//需要修改的样式.ivu-page-options{margin-left:10px;.ivu-page-options-sizer{margin-right:0;}}3.index.js文件import"./index.less";importcomponentfrom"./src/main";/*istanbulignorenext*/component.install=function(Vue){Vue.component(component.name,component);};exportd... 继续阅读 >

2020
11-13

解决iView Table组件宽度只变大不变小的问题

示例：<Tableclass="my-table"></Table>打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值，而且在父元素变小的时候这个值并没有相应地变小，所以才会导致的iViewTable组件只会变大不会变小。那么我们就可以根据这个原因才决定解决方案1、给Table组件的table标签设置一个important的width.my-tabletable{width:100%!important;}这个方法并不是特别好，因为他可能会出现table慢慢变小（而不是瞬间... 继续阅读 >

2020
11-13

解决iview table组件里的 固定列 表格不自适应的问题

当在使用iviewTable组件里固定列功能时出现表格不自适应宽度问题具体如下解决这个bug很简单把组件里的width改为minWidth即可columns:[{title:'账户名',key:'accountName',fixed:'left',minWidth:150},{title:'订阅名称',key:'subscriptionName',minWidth:140},{title:'订阅ID',key:'subscriptionId',minWidth:200},{title:'资源组',key:'resourceGroup',... 继续阅读 >

2020
11-13

vue iview 隐藏Table组件里的某一列操作

1、假设我要隐藏columns里的“账户组名称”columns:[{type:'selection',width:60,align:'center'},{title:'账号ID',key:'accountIdString'},{title:'账号名称',key:'accountName'},{title:'账户组名称',key:'accountGroupName'}]2、根据各自需求去判断示例：如果是单账户表标题显示"账号ID、账号名称"如果是账户组表标题显示"账户组名称"if(this.queryCostComparisonData[i].accountGroupName){this.columns... 继续阅读 >

2020
11-03

vue+iview使用树形控件的具体使用

vue+iview使用树形控件1.开发环境vue+iview2.电脑系统windows10专业版3.在使用vue+iview开发的过程中,我们经常会使用iview的树形控件,在这里我就简单的做一个分享,希望对你有所帮助!4.在template中添加如下代码:<Scrollstyle="width:100%"height="760"><Tree@on-select-change="chentreelick":data="treedata"expand-node></Tree></Scroll>5.在return中添加如下代码:treedata:[{title:"parent1",... 继续阅读 >

2020
10-09

Vue基于iview table展示图片实现点击放大

首先先安装依赖：npminstallv-viewer--save然后全局引入，我这边是在main.js里面操作写的：importViewerfrom'v-viewer'import'viewerjs/dist/viewer.css'然后注册下：Vue.use(Viewer)Viewer.setDefaults({Options:{'inline':true,'button':true,'navbar':true,'title':true,'toolbar':true,'tooltip':true,'movable':true,'zoomable':true,'rotatable':true,'scalable':true,'transition':true,'... 继续阅读 >

2020
10-08

iview实现图片上传功能

本文实例为大家分享了iview实现图片上传的具体代码，供大家参考，具体内容如下如下图片：这里结合iview里面表单验证做的完整代码如何 <template><div><divclass="navigation"><p><span>管理首页&nbsp;>&nbsp;应用&nbsp;>&nbsp;抢单侠>&nbsp;信贷管理>&nbsp;{{title}}</span></p></div><divclass="clearfixcontentcsssales-statis"><Formref="formValidate":model="formValidate":rules="ruleValida... 继续阅读 >

2020
09-24

Vue基于iview实现登录密码的显示与隐藏功能

iview简介iView是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品。1.背景近期，在使用abp开发项目过程中，前端vue输入登录密码时默认隐藏，但是如果用户输错密码需要切换显示跟隐藏。故有此文。2.实现最终效果2.1隐藏密码 2.2显示密码 显示密码需要点击密码框左侧眼睛3.实现思路3.1v-if判断当前密码显示状态密码输入框跟密码图标最外层用Div标签包住，并且用vue的v-ifv-else监听其显示还是隐藏... 继续阅读 >