Table 表格
将数据格式化
基本使用
data
属性绑定需要展示的数据
columns
属性配置表格的头部内容,其中 title
为每一项的表头内容,key
对应 data
中每一项的键
姓名 | 年龄 | 介绍 |
---|---|---|
卡莉斯塔 | 22 | 她的被动可以在发动攻击后进行小距离的跳跃 |
艾希 | 16 | 拥有强大减速和控制能力的远程射手 |
李青 | 34 | 非常优秀的打野英雄 |
贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
开启
原生驱动
当你 data
和 columns
属性都没有传递的时候,也可以将 f-table
看作是一个原生的 table 标签插入内容
Fighting Design
帮你内置好了样式
暂无数据
开启
自定义宽度
columns
属性可携带一个可选的 width
属性来配置每一列的宽度,该值可为 string 或者 number 类型
姓名 | 年龄 | 介绍 |
---|---|---|
卡莉斯塔 | 22 | 她的被动可以在发动攻击后进行小距离的跳跃 |
艾希 | 16 | 拥有强大减速和控制能力的远程射手 |
李青 | 34 | 非常优秀的打野英雄 |
贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
开启
带边框
border
属性可配置带有边框的表格
姓名 | 年龄 | 介绍 |
---|---|---|
卡莉斯塔 | 22 | 她的被动可以在发动攻击后进行小距离的跳跃 |
艾希 | 16 | 拥有强大减速和控制能力的远程射手 |
李青 | 34 | 非常优秀的打野英雄 |
贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
开启
斑马纹
zebra
属性可配置带有斑马纹的表格
姓名 | 年龄 | 介绍 |
---|---|---|
卡莉斯塔 | 22 | 她的被动可以在发动攻击后进行小距离的跳跃 |
艾希 | 16 | 拥有强大减速和控制能力的远程射手 |
李青 | 34 | 非常优秀的打野英雄 |
贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
开启
带有序号
num
属性可配置带有序号的表格
# | 姓名 | 年龄 | 介绍 |
---|---|---|---|
1 | 卡莉斯塔 | 22 | 她的被动可以在发动攻击后进行小距离的跳跃 |
2 | 艾希 | 16 | 拥有强大减速和控制能力的远程射手 |
3 | 李青 | 34 | 非常优秀的打野英雄 |
4 | 贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
开启
自定义高度
height
属性可自定义表格内容部分的高度(不包括表头高度),当设置了合法的 height
之后,表头变为固定样式
姓名 | 年龄 | 介绍 |
---|
卡莉斯塔 | 22 | 她的被动可以在发动攻击后进行小距离的跳跃 |
艾希 | 16 | 拥有强大减速和控制能力的远程射手 |
李青 | 34 | 非常优秀的打野英雄 |
贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
艾希 | 16 | 拥有强大减速和控制能力的远程射手 |
李青 | 34 | 非常优秀的打野英雄 |
贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
开启
对齐方式
align
属性配置表格的对齐方式
姓名 | 年龄 | 介绍 |
---|---|---|
卡莉斯塔 | 22 | 她的被动可以在发动攻击后进行小距离的跳跃 |
艾希 | 16 | 拥有强大减速和控制能力的远程射手 |
李青 | 34 | 非常优秀的打野英雄 |
贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
开启
自定义模板
columns
属性可携带一个 render
函数,以自定义该列的渲染模板,使用 vue 内置的 h 函数 渲染
姓名 | 年龄 | 介绍 | 操作 |
---|---|---|---|
卡莉斯塔 | 22 | 她的被动可以在发动攻击后进行小距离的跳跃 | |
艾希 | 16 | 拥有强大减速和控制能力的远程射手 | |
李青 | 34 | 非常优秀的打野英雄 | |
贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
开启
自定义样式
可以通过属性来自定义一些样式细节
姓名 | 年龄 | 介绍 |
---|---|---|
卡莉斯塔 | 22 | 她的被动可以在发动攻击后进行小距离的跳跃 |
艾希 | 16 | 拥有强大减速和控制能力的远程射手 |
李青 | 34 | 非常优秀的打野英雄 |
贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
开启
多选的
select
配置项,配合 on-select
回调可实现表格选择
姓名 | 年龄 | 介绍 | |
---|---|---|---|
卡莉斯塔 | 22 | 她的被动可以在发动攻击后进行小距离的跳跃 | |
艾希 | 16 | 拥有强大减速和控制能力的远程射手 | |
李青 | 34 | 非常优秀的打野英雄 | |
贾克斯 | 109 | 取得优势的武器可以输出成吨的伤害 |
开启
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
data | 数据列表 | array | —— | —— |
columns | 标题数据 | array | —— | —— |
align | 内容对齐方式 | TableAlign | left center right | left |
border | 是否显示边框 | boolean | —— | false |
num | 是否显示序号 | boolean | —— | false |
zebra | 是否显示斑马纹 | boolean | —— | false |
zebra-color | 自定义斑马纹颜色 | string | —— | —— |
height | 自定义表格内容高度 | string / number | —— | —— |
bg-color | 自定义背景颜色 | string | —— | —— |
head-bg-color | 自定义头部背景颜色 | string | —— | —— |
show-head | 是否展示头部 | boolean | —— | true |
select | 是否可多选 | boolean | —— | false |
on-select | 选中值改变触发的回调 | TableSelect | —— | —— |
Slots
插槽名称 | 说明说明 |
---|---|
default | 原生表格内容 |
tfoot | 自定义页脚 |
noData | 没有数据时候的自定义占位图 |
Interface
组件导出以下类型定义:
ts
import type {
TableInstance,
TableProps,
TableAlign,
TableDate,
TableRenderReturn,
TableColumns,
TableSelect
} from 'fighting-design'
TableAlign
ts
type TableAlign = 'left' | 'center' | 'right'
TableRenderReturn
自定义模板函数渲染返回值类型
ts
import type { VNode, RendererNode, RendererElement } from 'vue'
type TableRenderReturn = VNode<RendererNode, RendererElement, Record<string, any>>
TableRender
ts
import type { Component, Slot, Slots, VNode } from 'vue'
type Children = string | number | boolean | VNode | null | Children[]
type TableRender = (
type: string | Component,
props?: object | null,
children?: Children | Slot | Slots | Record<string, () => unknown>
) => TableRenderReturn | VNode
TableRenderTitle
ts
type TableRenderTitle = (
h: TableRender,
item: TableColumns,
index: number
) => TableRenderReturn
TableColumns
ts
interface TableColumns {
title: string | TableRenderTitle
key?: string
width?: number | string | undefined
render?: TableRenderData
}
TableRenderData
ts
type TableRenderData = (
h: TableRender,
row: Record<string, any>,
column: TableColumns,
index: number
) => TableRenderReturn
TableSelect
ts
type TableSelect = (value: TableData) => void