用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容。
查看
编辑
横纵内容过多时,可选择固定列和表头。
移除
数据结构比较复杂的时候,可使用多级表头来展现数据的层次关系。
选中第二行
取消选择
{
{ scope.row.date }}
切换第二、第三行的选中状态
取消选择
清除日期过滤器
清除所有过滤器
{
{scope.row.tag}}
{
{ scope.row.date }}
姓名: {
{ scope.row.name }}
住址: {
{ scope.row.address }}
{
{ scope.row.name }}
编辑
删除
当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。
{
{ props.row.name }}
{
{ props.row.shop }}
{
{ props.row.id }}
{
{ props.row.shopId }}
{
{ props.row.category }}
{
{ props.row.address }}
{
{ props.row.desc }}
Edit
Delete
若表格展示的是各类数字,可以在表尾显示各列的合计。
用于标记和选择。
标签一
标签二
标签三
标签四
标签五
{
{tag.name}}
动态编辑标签可以通过点击标签关闭按钮后触发的 close
事件来实现
{
{tag}}
+ New Tag
Tag 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。
默认标签
中等标签
小型标签
超小标签
Tag 组件提供了三个不同的主题:dark
、light
和 plain
。
Dark
{
{ item.label }}
Plain
{
{ item.label }}
用于展示操作进度,告知用户当前状态和预期。
可以通过 color
设置进度条的颜色,color
可以接受颜色字符串,函数和数组。
Progress 组件可通过 type
属性来指定使用环形进度条,在环形进度条中,还可以通过 width
属性来设置其大小。
用清晰的层级结构展示信息,可展开或折叠。
使用 render-content
使用 scoped slot
{
{ node.label }}
append(data)">
Append
remove(node, data)">
Delete
当数据量过多时,使用分页分解数据。
页数较少时的效果
大于 7 页时的效果
显示总数
调整每页显示条数
直接前往
完整功能
当只有一页时,通过设置 hide-on-single-page
属性来隐藏分页。
出现在按钮、图标旁的数字或状态标记。
评论
回复
评论
回复
点我查看
评论
回复
评论
回复
评论
回复
数据查询
用图标、图片或者字符的形式展示用户或事物信息。
circle
square
user
当展示类型为图片的时候,图片加载失败的 fallback
行为
当展示类型为图片的时候,使用 fit
属性定义图片如何适应容器框,同原生 object-fit
。
{
{ fit }}