文档章节

iview 踩坑之旅

o
 osc_a22drz29
发布于 2019/03/25 17:54
字数 587
阅读 11
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

公司重构管理系统,框架定了vue,UI在element和iview之间选,element样式被吐槽丑,于是选了iview,但是,,这个坑多啊。。。

废话少说,罗列了iview中容易出错或者懵逼的一些地方,希望后来的老哥们少费点头发。

#环境:vue-2.5, iview-3.0.1#

避免你浪费时间,先列出要点:

1,重置表单;

2,校验表单;

3,  Table相关;

4,select相关。

 

1,重置表单

1)单独重置某一项:

this.$refs[name].fields.forEach(function (e) {
      if (e.prop == 'abc') {
          e.resetField()
      }
})

2)全部重置:

this.$refs[name].resetFields();

 

2,校验表单

1)单独校验某一项:

this.$refs['formAdd'].validateField('xxx');

2)整个表单全部校验:

this.$refs[name].validate(callback);

3)表单验证整数的规则:

ruleValidate: {
    day: [
          { required: true, message: '请输入,必填', trigger: 'blur' },
          { type: 'integer', min: 0, max: 60, message: '必须是介于0和60之间的整数', trigger: 'blur', transform: value => +value }
        ]
} 

4)  自定义校验表单:

const validateTest = (rule, value, callback) => {
      if (value.length === 0) {
        return callback(new Error('请选择,必选'));
      }
      callback();
    };

// 在验证规则ruleValidate里添加
test: [
          {required: true, validator: validateTest, trigger: "blur"}
      ]

更多详细规则可以查看async-validator

 

3,  Table相关

某项的内容不是单纯的文本,需要显示html或者转换状态时,有二种方法。

1)在columns数组中使用render:

{ title: '状态',
          align: 'left',
          key: 'status',
          render: (h, params) => {
            let type = params.row.status;
            if (type === 1) return h('div', 'ok');
            return h('div', '不ok');
          }
  }

2)在columns数组中给该项添加type: 'html':

{ title: 'banner', align: 'center', key: 'banner',  type: 'html' } 
    然后在获取数据时,将特定项转换成需要的html

list.map(item => {
        let str = '';
        item.content.map(i => {
          str += '<p>' '+ i.title + '</p>';
        });
        item.content = str;
     });

  

4,select相关

<Select ref="select"></Select>

1) 给select赋初始值,仅在 filterable="true" 时有效:

this.$refs.select.setQuery('abc');

  某些版本的iview会导致下拉列表弹出,此时可以通过点击失焦,收起下拉列表:

this.$refs.tables.$el.click();

2) 清空单选项,仅在 clearable="true" 时有效:

this.$refs.select.clearSingleSelect();

3)手动清空select的值:

this.$refs.select.query = ''

 select有个坑,用remote-method远程过滤时,输入关键字得到列表,删除关键字时,每次删除都会请求一次,全部删完后不会发起请求,列表还缓存着最后一个关键字得到到数据。暂时没找到比较好办法。

 

好了,比较实用的都大概在这里了,后续如果有新的坑,会继续加在这里。

 

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
iview 踩坑之旅

公司重构管理系统,框架定了vue,UI在element和iview之间选,element样式被吐槽丑,于是选了iview,但是,,这个坑多啊。。。 废话少说,罗列了iview中容易出错或者懵逼的一些地方,希望后来...

osc_fhl05ph9
2019/06/06
1
0
移动端、PC端(前后台)、小程序常用的UI框架

移动端、PC端(前后台)、小程序常用的UI框架 1.移动端UI库 ①.Vant UI 官方地址:https://youzan.github.io/vant/#/zh-CN/intro github地址:https://github.com/youzan/vant 优点:用来做移...

jason_kiss
2019/10/17
557
0
iview小试牛刀

Vue.js v2.5.21 iview version 3.5.6 搞了好几天iview,终于有所收获了。 本人是后台开发者,最近心血来潮,想弄弄前端的东西,看到vue这么漂亮,于是想尝试弄下它。毕间不是专业做前端的,一...

hnzmdpan
2018/12/31
52
0
使用iview-project 打包build报错,ERROR in xxxxx.cheunk.js from UglifyJs

一、iview-project 为iview官方推荐工程,一个基于iview的vue脚手架   github网址:https://github.com/iview/iview-project 废话不多说,直接进入主题 二、build报错及原因 1、报错 大部分...

osc_a22drz29
2019/03/26
6
0
基于iview的后台管理

  年前由于时间紧迫,原本使用iview技术开发后台管理系统的大神另有任务,我中途接手该项目,此前对于iview一无所知的我是一脸的懵逼,好在后台管理的整体框架大神已经搭建好了,而我之前对...

osc_lbsmihm9
2018/02/27
1
0

没有更多内容

加载失败,请刷新页面

加载更多

Kubernetes发布SpringBoot项目过程总结

SpringBoot 项目创建完成后,通常会打成 jar 包运行,如果不使用 Kubernetes 可以直接通过 java -jar 或者脚本启动,如果需要发布到 Kubernetes 环境,那么需要编写 Dockerfile、构建镜像、推...

strict_nerd
05/23
0
0
👉 最新推出【Jenkins扩展篇-API实践|监控】教程🎉🎉🎉 助力全方位Jenkins管理!课程详情可添加小助手微信: proc_code。

本文分享自微信公众号 - DevOps云学堂(idevopsvip)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

泽阳DevOps
02/18
0
0
没错,用三方 Github 做授权登录就是这么简单!(OAuth2.0实战)

本文收录在个人博客:www.chengxy-nds.top,技术资源共享。 上一篇《OAuth2.0 的四种授权方式》文末说过,后续要来一波OAuth2.0实战,耽误了几天今儿终于补上了。 最近在做自己的开源项目(f...

程序员内点事
24分钟前
29
0
Docker可视化工具Portainer

前言 对于新手来说,还是要熟悉并掌握Docker命令,因为它的命令还是非常清晰简单的。随着逐渐熟悉命令后,为了提高工作效率我们可以考虑借助一些工具协助。目前业界对于Docker可视化工具比较...

ville
28分钟前
29
0
从 Git 仓库的 Commit 历史中移除敏感文件

在很多情况,我们由于疏忽会将一些敏感信息误传到 Git 仓库上面去。 尽管我们可以使用git rm将包含敏感信息文件删除掉,然后重新提交上传,文件就不会在仓库文件列表显示。 但是这并不能完全...

A_laoshiren
33分钟前
35
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部