Element-UI组件之数据Data

Element-UI组件之数据Data

  • Table 表格
    • 基础表格
    • 带斑马纹表格
    • 带边框表格
    • 带状态表格
    • 固定表头
    • 固定列
    • 固定列和表头
    • 流体高度
    • 多级表头
    • 单选
    • 多选
    • 排序
    • 筛选
    • 自定义列模板
    • 展开行
    • 树形数据与懒加载
    • 自定义表头
    • 表尾合计行
    • 合并行或列
    • 自定义索引
  • Tag 标签
    • 基础用法
    • 可移除标签
    • 动态编辑标签
    • 不同尺寸
    • 不同主题
  • Progress 进度条
    • 线形进度条
    • 百分比内显
    • 自定义颜色
    • 环形进度条
    • 仪表盘形进度条
  • Tree 树形控件
    • 基础用法
    • 可选择
    • 懒加载自定义叶子节点
    • 默认展开和默认选中
    • 禁用状态
    • 树节点的选择
    • 自定义节点内容
    • 节点过滤
    • 手风琴模式
    • 可拖拽节点
  • Pagination 分页
    • 基础用法
    • 设置最大页码按钮数
    • 带有背景色的分页
    • 小型分页
    • 附加功能
    • 当只有一页时隐藏分页
  • Badge 标记
    • 基础用法
    • 最大值
    • 自定义内容
    • 小红点
  • Avatar 头像
    • 基本用法
    • 展示类型
    • 图片加载失败的 fallback 行为
    • 图片如何适应容器框

Table 表格

基础表格

Element-UI组件之数据Data_第1张图片



  

带斑马纹表格

Element-UI组件之数据Data_第2张图片




带边框表格

Element-UI组件之数据Data_第3张图片





带状态表格

Element-UI组件之数据Data_第4张图片






固定表头

Element-UI组件之数据Data_第5张图片




固定列

Element-UI组件之数据Data_第6张图片




固定列和表头

Element-UI组件之数据Data_第7张图片




流体高度

Element-UI组件之数据Data_第8张图片




多级表头

Element-UI组件之数据Data_第9张图片




单选

Element-UI组件之数据Data_第10张图片




多选

Element-UI组件之数据Data_第11张图片




排序

Element-UI组件之数据Data_第12张图片




筛选

Element-UI组件之数据Data_第13张图片




自定义列模板

Element-UI组件之数据Data_第14张图片




展开行

Element-UI组件之数据Data_第15张图片






树形数据与懒加载

Element-UI组件之数据Data_第16张图片
Element-UI组件之数据Data_第17张图片



自定义表头

Element-UI组件之数据Data_第18张图片




表尾合计行

Element-UI组件之数据Data_第19张图片




合并行或列

Element-UI组件之数据Data_第20张图片




自定义索引

Element-UI组件之数据Data_第21张图片




Tag 标签

基础用法

Element-UI组件之数据Data_第22张图片

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

可移除标签

Element-UI组件之数据Data_第23张图片


  {{tag.name}}



动态编辑标签

在这里插入图片描述


  {{tag}}



+ New Tag




不同尺寸

Element-UI组件之数据Data_第24张图片

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

不同主题

Element-UI组件之数据Data_第25张图片

Dark {{ item.label }}
Plain {{ item.label }}

Progress 进度条

线形进度条

Element-UI组件之数据Data_第26张图片









百分比内显

Element-UI组件之数据Data_第27张图片





自定义颜色

Element-UI组件之数据Data_第28张图片






环形进度条

Element-UI组件之数据Data_第29张图片






仪表盘形进度条

Element-UI组件之数据Data_第30张图片


Tree 树形控件

基础用法

Element-UI组件之数据Data_第31张图片




可选择

Element-UI组件之数据Data_第32张图片





懒加载自定义叶子节点

Element-UI组件之数据Data_第33张图片





默认展开和默认选中

Element-UI组件之数据Data_第34张图片






禁用状态

Element-UI组件之数据Data_第35张图片





树节点的选择

Element-UI组件之数据Data_第36张图片




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

自定义节点内容

Element-UI组件之数据Data_第37张图片

使用 render-content

使用 scoped slot

{{ node.label }} Append Delete

节点过滤

Element-UI组件之数据Data_第38张图片








手风琴模式

Element-UI组件之数据Data_第39张图片





可拖拽节点

Element-UI组件之数据Data_第40张图片





Pagination 分页

基础用法

Element-UI组件之数据Data_第41张图片

页数较少时的效果
大于 7 页时的效果

设置最大页码按钮数

Element-UI组件之数据Data_第42张图片



带有背景色的分页

Element-UI组件之数据Data_第43张图片



小型分页

Element-UI组件之数据Data_第44张图片



附加功能

Element-UI组件之数据Data_第45张图片



当只有一页时隐藏分页

在这里插入图片描述

Badge 标记

基础用法

Element-UI组件之数据Data_第46张图片


  评论


  回复


  评论


  回复



  
    点我查看
  
  
    
      评论
      
    
    
      回复
      
    
  



最大值

Element-UI组件之数据Data_第47张图片


  评论


  回复



自定义内容

Element-UI组件之数据Data_第48张图片


  评论


  回复



小红点

Element-UI组件之数据Data_第49张图片

数据查询

  



Avatar 头像

基本用法

在这里插入图片描述




展示类型

在这里插入图片描述


图片加载失败的 fallback 行为

在这里插入图片描述




图片如何适应容器框

Element-UI组件之数据Data_第50张图片




你可能感兴趣的:(Element-UI组件之数据Data)