iview中Select 选择器多选校验方法

iview提供的select组件中使用multiple属性可以开启多选模式,返回的数据也是数组的形式。

iview使用的校验是根据async-validator来实现数据验证。验证规则可前去查看开源项目

多选模式下的select组件校验使用type为array,可设置len属性来规定数组的长度，设置len:1则不是数组长度为1则通过校验，不设置则数组有元素则通过校验。

{

type:

'array',

required:

true,

message:

'不能为空'}

正则可以写在data中

在rules中引用即可

以上这篇iview中Select

选择器多选校验方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:完美解决iview

的select下拉框选项错位的问题

不多说，先看看效果把！

在iview中Table表格中有一个列描述数据对象（render），render是 columns 中的一项，自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引。

当然官网提供一个简单的使用方法： iView - A high quality UI Toolkit based on Vue.js

现在我们来实现，添加一个Dropdown 下拉菜单：

这里要注意下我描述的，1，2，3，4点，先不急，咱们先看下官网这个Dropdown组件

不难看出，讲一个组件写成render其实很简单，只需要写成这样

最后就是要注意下，绑定事件了，这里的on要写成nativeOn，才可以出发事件。

不知道  小伙伴看懂了原理吗？不明白就留言，我会及时回复你的。

冒被鄙视的风险回答下

on-select 作用在<Menu>标签组件上

则

template上这么写

<Menu ... @on-select="turnUrl">

script中这么写

export default {

    methods: {

        turnUrl(name) {

            // name是 <Menu-item name="timestamp">时间戳</Menu-item> 的name

            // 我的router有 /timestamp 于是使用了vue-router中的编程路由进行动态跳转

            this.$router.push(name)

    }

    }

}

回答完毕

---