详细介绍ElementUI组件库_知识百科

本篇文章给大家带来了关于vuejs/" target="_blank">vue的相关知识，其中主要介绍了关于elementui组件库的相关问题，elementui组件库是一套基于vue2.0的桌面端组件库，提供了丰富的组件帮助开发人员快速构建页面，下面一起来看一下，希望对大家有帮助。

【相关推荐：javascript视频教程、vue.js教程】

ElementUI介绍

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

官网地址：http://element-cn.eleme.io/#/zh-CN

在页面上引入 js 和 css 文件即可开始使用，如下：

<ｓｃｒｉｐｔ><ｓｃｒｉｐｔ>

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列

：顶栏容器

：侧边栏容器

：主要区域容器

：底栏容器

            Header              Aside                  Main          Footer                    
  <ｓｃｒｉｐｔ> new Vue({ el:'#app' });

Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

  个人中心      退出系统    修改密码    联系管理员

NavMenu 导航菜单

为网站提供导航功能的菜单。

      emplate>            导航一        选项1    选项2    选项3            选项1    选项2    选项3

Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

                  <ｓｃｒｉｐｔ> new Vue({ el:'#app', data:{ tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }] }, methods:{ handleUpdate(row){ alert(row.date); }, handleDelete(row){ alert(row.date); } } });

Pagination 分页

当数据量过多时，使用分页分解数据。

<ｓｃｒｉｐｔ> new Vue({ el:'#app', methods:{ handleCurrentChange(page){ alert(page); } } });

Message 消息提示

常用于主动操作后的反馈提示。

消息成功警告错误<ｓｃｒｉｐｔ> new Vue({ el: '#app', methods: { open1() { this.$message('这是一条消息提示'); }, open2() { this.$message({ message: '恭喜你，这是一条成功消息', type: 'success' }); }, open3() { this.$message({ message: '警告哦，这是一条警告消息', type: 'warning' }); }, open4() { this.$message.error('错了哦，这是一条错误消息'); } } })

Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础的、简洁的标签页
  用户管理  配置管理  角色管理  定时任务补偿选项卡样式的标签页
  用户管理  配置管理  角色管理  定时任务补偿卡片化的标签页
  用户管理  配置管理  角色管理  定时任务补偿<ｓｃｒｉｐｔ> new Vue({ el: '#app' })

Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、ｓｅｌｅｃｔ、Checkbox、Radio、Switch、DatePicker、TimePicker。

                                                      -                                                                                                  立即创建  <ｓｃｒｉｐｔ> new Vue({ el: '#app', data:{ form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, //定义校验规则 rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ] } }, methods:{ onSubmit() { console.log(this.form); //validate：对整个表单进行校验的方法，参数为一个回调函数。 //该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。 this.$refs['form'].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } } })