iview 踩坑之旅

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

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

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

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

1,重置表单;

2,校验表单;

3,  Table相关;

4,select相关。

1,重置表单

1)单独重置某一项:


1

2

3

4

5

this.$refs[name].fields.forEach(function (e) {

      if (e.prop == ‘abc‘) {

          e.resetField()

      }

})

2)全部重置:


1

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

2,校验表单

1)单独校验某一项:


1

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

2)整个表单全部校验:


1

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

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


1

2

3

4

5

6

ruleValidate: {

    day: [

          { required: true, message: ‘请输入,必填‘, trigger: ‘blur‘ },

          { type: ‘integer‘, min: 0, max: 60, message: ‘必须是介于0和60之间的整数‘, trigger: ‘blur‘, transform: value => +value }

        ]

} 

4)  自定义校验表单:


1

2

3

4

5

6

7

8

9

10

11

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:


1

2

3

4

5

6

7

8

9

{ 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‘:


1

{ title: ‘banner‘, align: ‘center‘, key: ‘banner‘,  type: ‘html‘ } 

然后在获取数据时,将特定项转换成需要的html


1

2

3

4

5

6

7

list.map(item => {

        let str = ‘‘;

        item.content.map(i => {

          str += ‘<p>‘ ‘+ i.title + ‘</p>‘;

        });

        item.content = str;

     });

  

4,select相关


1

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

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


1

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

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


1

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

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


1

this.$refs.select.clearSingleSelect();

3)手动清空select的值:


1

this.$refs.select.query = ‘‘

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

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

原文地址:https://www.cnblogs.com/qdwz/p/10984298.html

时间: 2024-10-10 13:06:34

iview 踩坑之旅的相关文章

Zabbix 踩坑之旅——zabbix触发重启tomcat

一.实验需求 公司tomcat服务经常自动崩溃,导致业务中断,暂时用zabbix对其执行监控,在tomcat崩溃时能够先自动启动,保证业务尽快恢复正常. 二.准备环境 系统环境:CentOS 6.5 IP地址: zabbix-server: 192.168.239.128 zabbix-agent: 192.168.239.130 zabbix的服务端和客户端的安装此处都以rpm包安装,配置略过.agent端上安装好tomcat. 三.开启踩坑之旅--agent端 ① 修改zabbix-agen

vue+ vue-router + webpack 踩坑之旅

说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少不了res.render("xx",data)    这句话的意思就是去查找相应的模板文件然后在用数据去渲染在将渲染好的页面去返回给浏览器,给浏览器去解析,渲染模板其实就是做的替换字符串+拼接字符串的活  各种的模板引擎也有各个优化的点(比如可以将对应的模板编译的函数保存在内存中,然后在通

一次痛苦又甜蜜的微信支付踩坑之旅

凡是和钱打交道的事,没有一样是容易的.这是我第一次接触微信支付,发现网上还是有很多同学在求助,XXX了怎么办?XXX是什么情况?为了帮助更多的小伙伴脱离"苦海",我决定写下这次的踩坑之旅,给更多的人帮助. 介绍 微信支付方式分为刷卡支付.公众号支付.扫码支付.APP支付.H5支付.小程序支付. 先从应用场景来各自说一说,这样,能够最快的判断出应该选择哪一种支付. 刷卡支付:使用扫描设备(扫描枪)多见于超市.便利店使用 公众号支付:嵌入公众号的H5页面 扫码支付:用户打开"微信

小程序踩坑之旅

小程序踩坑之旅 —— 分包 小程序踩坑之旅 —— 分享 小程序踩坑之旅 —— 页面路由 小程序踩坑之旅 —— canvas 原文地址:https://www.cnblogs.com/xxhuan/p/11334792.html

Python 踩坑之旅进程篇其四一次性踩透 uid euid suid gid egid sgid的坑坑洼洼

目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4 技术关键字 1.5 坑后思考 下期坑位预告 代码示例支持 平台: Centos 6.3 Python: 2.7.14 代码示例: 菜单 - Python踩坑指南代码示例 1.1 踩坑案例 小明是个服务器管理员, 他从老管理员手里接手了一个非常繁琐的运维工作: 短暂授权root 账号给不同的 team 接口人运行备份任务 该运维任务有几个特点: 任务需且仅需运行在 root 下 root 账号只能短暂授权给各个小组 通过账号管理平

Python踩坑之旅其一杀不死的Shell子进程

1.1 踩坑案例 踩坑的程序是个常驻的Agent类管理进程, 包括但不限于如下类型的任务在执行: a. 多线程的网络通信包处理 和控制Master节点交互 有固定Listen端口 b. 定期作业任务, 通过subprocess.Pipe执行shell命令 c. etc 发现坑的过程很有意思: a.重启Agent发现Port被占用了 => 立刻想到可能进程没被杀死, 是不是停止脚本出问题 => 排除发现不是, Agent进程确实死亡了 => 通过 netstat -tanop|grep p

百度地图sdk踩坑之旅

1.写在前面 项目中需要加上路线规划,导航,添加覆盖物,因为我最开始项目中定位我使用的是百度定位,所以为了省事,接着使用百度地图sdk实现这些.这两天踩了很多百度地图的坑,记下来.因为一些原因,后面会说,需求还没做完,所以效果图很简单,如下. 2.坑1,环境配置 对于百度地图sdk的配置我是无语.因为一开始项目中并没打算使用百度地图其他功能,只是准备定位.所以我下载sdk时只是下载了定位的sdk,如图 现在需要加上地图和导航的sdk(后面才知道导航并不需要下载专门的导航sdk,因为地图sdk可以

Ubuntu搭建Hadoop的踩坑之旅(三)

之前的两篇文章介绍了如何从0开始到搭建好带有JDK的Ubuntu的过程,本来这篇文章是打算介绍搭建伪分布式集群的.但是后来想想反正伪分布式和完全分布式差不多,所幸直接介绍完全分布式了. 如果你想自己搭建伪分布式玩的话,参考:在VMware下安装Ubuntu并部署Hadoop1.2.1分布式环境 - CSDN博客 这一篇主要参考这篇文章:Hadoop2.6.0安装 - 集群(搭建的过程中没截图,大家可以到原博客看) 一.所需的环境和软件:(以下是我们的环境,仅供参考) 1. 操作系统:Window

快应用开发的踩坑之旅

前言 尝试一款新的开发框架的时候势必会遇见各种各样的问题.可能因为一开始不熟悉文档,导致配置错误,或是api使用错误.当然开发的时候我们也不能确认框架没有问题,是否存在bug.所以在某些出错的情况下,我们也许会不断怀疑自己,怀疑框架,最终怀疑人生.这时候就需要开发者们发挥无私的精神,积极讨论,记录并贡献自己的填坑秘笈,供大家讨论参考.所以在这里我就先记录自己收集及遇见的坑,希望起到抛砖引玉的作用.大家有不同的问题的可以一起讨论,方便后来的开发者. 容易出错的地方 1.更新 rpk 的时候出现版本