巴士下载站 / 汇聚当下最新最酷的软件下载站!
巴士下载站
您的位置: 首页 >软件下载 > 编程开发 > 编程工具 > Element-UI组件库 v2.9.0 中文版

巴士为您推荐: Element UI组件库

ElementUI是一款网站开发工具,它为用户提供了网站开发所需要的大部分组件,有了这些组件库就不用程序员从头开始敲代码了,很多功能只需要调用一下就可以了,有需要的朋友欢迎在WWW.11684.COM 下载使用。

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

elementui菜鸟教程

1.安装 npm i element-ui -S

2.main.js中

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

3.使用

参照官网 组件

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

elementui表单验证

第一种常用方式

表单上加rules{object}

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

这种方式需要在data()中写入rule{},对于需要校验字段prop中的如visitorName写上验证规则,如下:

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

其中对于有些需要自定义的校验规则可以作为变量写在data中:

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

比较适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

第二种方式

在el-form-item单个添加

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

这种方式适用于需要个别检验的字段,或者表单字段有变动的校验;

第三种方式

动态增减表单项

先看需求效果图

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

对应的数据结构:

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

对应删除增加表单项的操作为:

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

这样的rule、prop直接写就对应不上表单mode绑定的对象上的属性,所以在此要用循环的方式找到要校验的字段所在数据中的索引,然后再以字符串拼接的方式连上校验字段名称:

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

渲染出来的html为:

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

ElementUI响应式布局

参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

ement 额外提供了一系列类名,用于在某些条件下隐藏元素。

这些类名可以添加在任何 DOM 元素或自定义组件上。

display.css包含的类名及其含义(如下表所示):

Element-UI组件库下载-Element-UI组件库 v2.9.0 中文版下载

Element-UI组件库下载

猜你喜欢
排行榜
回顶部 去下载