element组件---数据

Table 表格
Tag 标签
Progress 进度条
Tree 树形控件
Pagination 分页
Badge 标记
Avatar 头像
Table 表格
用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
基础表格
基础的表格展示用法。
当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽
element组件---数据_第1张图片

 

  

带斑马纹表格
使用带斑马纹的表格,可以更容易区分出不同行的数据。
stripe属性可以创建带斑马纹的表格。它接受一个Boolean,默认为false,设置为true即为启用。
element组件---数据_第2张图片




带边框表格
默认情况下,Table 组件是不具有竖直方向的边框的,如果需要,可以使用border属性,它接受一个Boolean,设置为true即可启用。
element组件---数据_第3张图片




带状态表格
可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容
可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。
element组件---数据_第4张图片






固定表头
纵向内容过多时,可选择固定表头。
只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码
element组件---数据_第5张图片




固定列
横向内容过多时,可选择固定列
固定列需要使用fixed属性,它接受 Boolean 值或者leftright,表示左边固定还是右边固定。
element组件---数据_第6张图片




固定列和表头
横纵内容过多时,可选择固定列和表头。
固定列和表头可以同时使用,只需要将上述两个属性分别设置好即可。
element组件---数据_第7张图片




流体高度
当数据量动态变化时,可以为 Table 设置一个最大高度。
通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度,则会显示一个滚动条。
element组件---数据_第8张图片




多级表头
数据结构比较复杂的时候,可使用多级表头来展现数据的层次关系。
只需要在 el-table-column 里面嵌套 el-table-column,就可以实现多级表头。
element组件---数据_第9张图片




                    
                    

你可能感兴趣的:(Data)