![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue-iview
浩星
95后的我从小鲜肉变成老腊肉了
展开
-
vue中实现删除校验-iview的气泡提示
前言: 很多时候我们担心删除会出现误删的情况,这样就需要对删除进行二次校验,确定是否继续删除效果图:实现代码: <Poptip popper-class="deletePopper" confirm title="确定要删除该条数据吗?" @on-ok="ok" @on-cancel=""> <Bu...原创 2020-08-06 17:20:15 · 1547 阅读 · 0 评论 -
iview的radio设置value+label
前言: 在iview中使用单选radio的时候,观察官网案例会发现,里面只有汉字,也就是label,但是我们后台数据一般都是页面展示label,然后后台需要value值,这种操作的实现代码:1 ,在data定义数组 urlList:[ { label:'有', value:'1' }, { label:'无', va...原创 2020-08-04 17:27:31 · 3319 阅读 · 0 评论 -
iView中表格添加点击展开扩展的功能
前言: iview的table里面的展开,我们一般会希望点击行来触发这个效果更多效果图:实现代码:template:<Table @on-row-click="onExpand"></Table>mehtods:methods:{ onExpand(row,index){ this.msgData.forEach((item,i)=>{ //这个循环是为了每次只能展开一个,其他自动收起,...原创 2020-07-22 10:39:07 · 1788 阅读 · 3 评论 -
iview的expand展开功能,默认展开第一个
前言: iview的table功能是越来越丰富了,4.0开始,功能已经可以基本满足我们需要了,跟element可以比较了,尤其是他对render函数的支持性非常好。这里说下他的expand展开功能:展示效果:实现代码:分两个vue文件1、父组件中:给你的columns中加下面代码 { title: '展开', type: 'expand', width: 80, ...原创 2020-07-17 14:34:01 · 6492 阅读 · 2 评论 -
vue中用使用render函数
前言: render是比较常用的功能,比如在框架里面的table的时候经常会使用到,这里来说一说,这是使用了iview的Rate(星星打分)来说明效果效果图:实现代码:{ title: '难易度', // align: 'center', render:(h, params)=> { ...原创 2020-02-14 14:00:30 · 442 阅读 · 2 评论 -
iview在render函数中添加Poptip提示
前言: 在使用iview的table的时候删除一般为了防止误删,我们会用 poptip 气泡提示来进行操作二次限制,这里使用iview的table的render函数渲染直接加入效果图:实现代码:具体功能代码: //加上气泡 h('Poptip', { prop...原创 2020-01-21 10:30:30 · 2363 阅读 · 1 评论 -
vue+图片裁剪vue-cropper以及api
前言: 因为项目需要,需要实现一个上传完图片,对图片进行二次处理的需求,就使用了vue-cropper来实现这个功能,总的来说还是感觉非常不错的软件,这里分享下我的使用方法,以及vue-cropper的api(见最下)实现效果:实现步骤:步骤一:项目中安装 vue-croppernpm install vue-cropper步骤二:在main.js中注册...原创 2019-12-19 17:29:26 · 4182 阅读 · 3 评论 -
vue+iview4.0 , vue+element实现下拉框可以自定义输入内容
前言: 最近10月的时候 iview4.0 更新了,但是一直在忙也没用到,正好因为要实现一个下拉框里面我要自定义输入内容的效果,element里面是有这个效果,antd里面没有,因为本项目用的iview,也不能因为一个效果直接换框架,就更新项目中的iview到4.0版本了;先看看效果图:1、iview4实现的单选增加2、element实现的多选增加第一:用...原创 2019-12-12 18:21:16 · 9278 阅读 · 8 评论 -
基于iView-Cascader的多选级联选择器:cascader-multi
前言: iview的cascader 多级联动虽然可以实现多级联动,但是不支持多选,这里cascader-multi 可以支持多选功能实现效果(真实效果和他有出入,这是网上找的好看的动图):实现步骤:1、安装npm i cascader-multi --save2、main.js引入(本来想页面按需引入,但是引入页面不显示)import ca...原创 2019-11-29 09:52:06 · 7446 阅读 · 14 评论 -
vue中iview-admin后台管理系统模板-基于iview的后台管理模板+node_model可运行
前言:(安装包请拉到最下面) 之前我们说过一个基于vue的element-ui的vue项目模板vue-element-admin(点击可跳转),当然我们的iview也是有这样的项目模板的,这里就提供下这里的地址一、项目部分页面展示:(***登录页面密码随便写***)二、项目相关安装包链接地址:https://pan.baidu.com/s/1UJs...原创 2019-11-12 20:38:22 · 2392 阅读 · 0 评论 -
vue+iview+图片上传-手动上传
老规矩,先看看效果:点击前:点击后:下来是我们的组件cuploadimg.vue<template> <div class="uploadImgDiv"> <Upload class="upload" v-model="photoVal" :accept="accept" ...原创 2019-09-18 20:38:02 · 1116 阅读 · 0 评论 -
vue-iview-table二次封装,render函数,slot的封装
前言: 正好这个项目用到iview的table,之前有封装的element的table,这里把iview的也封装下,提高复用性和价值。首先:我们的公共组件ctable.vue<template> <Table :width='width' :height='height' :stripe='stripe' :bo...原创 2019-09-19 10:53:49 · 5412 阅读 · 13 评论 -
vue+iview+select二次封装,搜索,多选等功能封装
前言: 对iview的select下拉进行二次封装,基本上常用的参数和方法里面都有下拉组件:cselect.vue<template> <Select v-model="sel_val" :clearable="clearable" :label-in-value="labelAndVal" :element...原创 2019-09-20 19:44:14 · 2112 阅读 · 0 评论 -
iview封装时间控件
前言: 对iview的时间控件下来进行二次封装,里面可以实现input的那种,也有点击自定义的下拉效果;效果图:1、input+时间控件2、定制+时间控件下面来贴下我们的组件代码cdate.vue<template> <div class="dateDiv"> <!-- input框版本 --> ...原创 2019-09-21 19:26:27 · 1360 阅读 · 5 评论 -
iview+page封装+强制刷新
前言: iview的page封装,缺点无法固定页码按钮数量,而且current的页面恢复选中第一个实现不了,这里动态写了强制刷新的方法下面是组件cpage.vue<template> <Page v-if="showPage" :class-name='className' :total="tota...原创 2019-09-26 23:23:37 · 981 阅读 · 2 评论 -
iview+侧边栏菜单+解决左侧菜单刷新有选中第一个的问题
前言: iview的左侧菜单,使用后发现有刷新选中效果就不对了,在这里是把他的name值设置跟路径一样来完美的解决这个问题的。效果图:下来是组件代码:LeftMenu.vue<template> <Sider ref="leftMenu" class="slide"> <Menu theme="dark" :active...原创 2019-10-03 15:42:30 · 3120 阅读 · 0 评论 -
vue+iview+drawer , vue抽屉效果
前言: iview+抽屉效果,通过class来控制内容需要展示的内容效果展示图:第一:封装的组件cdrawer.vue<template> <Drawer v-model="drawerVal" :class-name='className' :mask='mask' :...原创 2019-10-07 11:49:22 · 10614 阅读 · 1 评论 -
iview+时间选择器+禁止选择事件
前言: iview的时间框禁止事件使用它自身的options:bbyfOptionsbbyfOptions:{//我这里限制是当前时间之后和两年前都不能选择 disabledDate (date) { return (date && date.valueOf() > Date.now() || d...原创 2019-10-16 21:51:10 · 1518 阅读 · 0 评论