vue+element常用组件

 常用element组件

Radio 单选框

Select 选择器

Cascader 级联选择器

DateTimePicker 日期时间选择器

Upload 上传

Form 表单

Table 表格

Tag 标签

Pagination 分页

Alert 警告

Loading 加载

MessageBox 弹框

Tabs 标签页

Dialog 对话框

Table 表格

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

el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。

  

  

  请求接口获取数据

 vue+element常用组件_第1张图片

 

Pagination 分页

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

此例是一个完整的用例,使用了size-changecurrent-change事件来处理页码大小和当前页变动时候触发的事件。page-sizes接受一个整型数组,数组元素为展示的选择每页显示个数的选项,[100, 200, 300, 400]表示四个选项,每页显示 100 个,200 个,300 个或者 400 个。


 vue+element常用组件_第2张图片

 vue+element常用组件_第3张图片

 

 案列

vue+element常用组件_第4张图片

 Tabs 标签页

Tabs 组件提供了选项卡功能,默认选中第一个标签页,你也可以通过 value 属性来指定当前选中的标签页。


 vue+element常用组件_第5张图片

 vue+element常用组件_第6张图片

 

 有空更新

你可能感兴趣的:(vue.js,elementui,javascript)