element组件----数据组件

Table 表格

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

基础表格

基础的表格展示用法。

带斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。

带边框表格

带状态表格

可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。

固定表头

纵向内容过多时，可选择固定表头。

固定列

横向内容过多时，可选择固定列。

固定列和表头

横纵内容过多时，可选择固定列和表头。

流体高度

当数据量动态变化时，可以为 Table 设置一个最大高度。

多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

单选

选择单行数据时使用色块表示。

多选

选择多行数据时使用 Checkbox。

排序

对表格进行排序，可快速查找或对比数据。

筛选

对表格进行筛选，可快速查找到自己想看的数据。

自定义列模板

自定义列的显示内容，可组合其他组件使用。

展开行

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

树形数据与懒加载

自定义表头

表头支持自定义。

表尾合计行

若表格展示的是各类数字，可以在表尾显示各列的合计。

合并行或列

多行或多列共用一个数据时，可以合并行或列。

自定义索引

自定义 type=index 列的行号。

Tag 标签

用于标记和选择。

基础用法

标签一
标签二
标签三
标签四
标签五

可移除标签

  {
    {tag.name}}

动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现

  {
    {tag}}



+ New Tag

不同尺寸

Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

默认标签
中等标签
小型标签
超小标签

不同主题

Tag 组件提供了三个不同的主题：dark、light 和 plain。

  Dark
  
    {
    { item.label }}
  


  Plain
  
    {
    { item.label }}
  

Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

线形进度条

百分比内显

百分比不占用额外控件，适用于文件上传等场景。

自定义颜色

可以通过 color 设置进度条的颜色，color 可以接受颜色字符串，函数和数组。

环形进度条

Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。

仪表盘形进度条

Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

基础用法

基础的树形结构展示。

可选择

适用于需要选择层级时使用。

懒加载自定义叶子节点

默认展开和默认选中

可将 Tree 的某些节点设置为默认展开或默认选中

禁用状态

可将 Tree 的某些节点设置为禁用状态

树节点的选择

  通过 node 获取
  通过 key 获取
  通过 node 设置
  通过 key 设置
  清空

自定义节点内容

节点的内容支持自定义，可以在节点区添加按钮或图标等内容

  

    
使用 render-content
    
    
  
  

    
使用 scoped slot
    
      
        {
    { node.label }}
        
          
            Append
          
          
            Delete
          
        
      
    
  

节点过滤

通过关键字过滤树节点

手风琴模式

对于同一级的节点，每次只能展开一个

可拖拽节点

通过 draggable 属性可让节点变为可拖拽

Pagination 分页

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

基础用法

  页数较少时的效果
  
  


  大于 7 页时的效果
  
  

设置最大页码按钮数

带有背景色的分页

小型分页

在空间有限的情况下，可以使用简单的小型分页。

附加功能

根据场景需要，可以添加其他功能模块。

当只有一页时隐藏分页

当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。

Badge 标记

出现在按钮、图标旁的数字或状态标记。

基础用法

展示新消息数量。

  评论


  回复


  评论


  回复



  
    点我查看
  
  
    
      评论
      
    
    
      回复
      
    
  

最大值

可自定义最大值。

  评论


  回复

自定义内容

可以显示数字以外的文本内容。

  评论


  回复

小红点

以红点的形式标注需要关注的内容。

数据查询

  

Avatar 头像

用图标、图片或者字符的形式展示用户或事物信息。

基本用法

通过 shape 和 size 设置头像的形状和大小。

展示类型

支持三种类型：图标、图片和字符

图片加载失败的 fallback 行为

当展示类型为图片的时候，图片加载失败的 fallback 行为

图片如何适应容器框

当展示类型为图片的时候，使用 fit 属性定义图片如何适应容器框，同原生 object-fit。