当前观点：详细介绍ElementUI组件库

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

(资料图片仅供参考)

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

ElementUI介绍

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

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

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

<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script>

Container 布局容器

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

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

：顶栏容器

：侧边栏容器

：主要区域容器

：底栏容器

  
          Header              Aside                  Main          Footer                    
  <script>  new Vue({    el:"#app"  });</script>

Dropdown 下拉菜单

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

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

NavMenu 导航菜单

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

          选项1    选项2    选项3            选项1    选项2    选项3  

Table 表格

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

                  <script>  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);      }    }  });</script>

Pagination 分页

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

<script>  new Vue({    el:"#app",    methods:{      handleCurrentChange(page){        alert(page);      }    }  });</script>

Message 消息提示

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

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

Tabs 标签页

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

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

Form 表单

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

                                                      -                                                                                                  立即创建  <script>  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;          }        });      }    }  })</script>

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

以上就是详细介绍ElementUI组件库的详细内容，更多请关注php中文网其它相关文章！

关键词： 定时任务 配置管理 金沙江路