表格

示例

表头1
表头2
第一行哈哈2
第二行哈哈2
表头1
表头2
第一行哈哈2
第二行哈哈2
基本用法

上面是一个简单的Table,通过data属性设置表格展示的数据,通过scheme属性或者TableColumn组件定义表格结构,详见”定义表格结构“说明

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
定义该列单元格内容
key形式
key为一个路径字符串
没有这个key,则返回空
虚拟DOM获取到了item.bitem.c.c1
定义该列单元格内容
key形式
key为一个路径字符串
没有这个key,则返回空
虚拟DOM获取到了item.bitem.c.c1
定义表格结构

定义表格结构有两种形式:

  1. 通过TableColumn组件定义
  2. 通过scheme属性定义

TableColumn详细说明,见下文属性说明,scheme属性值的结构与之相对应

对于简单的表格,默认会使用key去取data中的数据,例如本例中,keya的列,默认会取data中对应keya的数据进行展示,key支持路径取值,例如:a.b.0。当然我们也可以通过template属性指定复杂内容

为了保证列顺序正确,key不要以数字开头

@since v0.5.6 也可以通过templateblock定义单元格内容

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
自定义表头内容
表头2
第一行哈哈2
第二行哈哈2
自定义表头内容
表头2
第一行哈哈2
第二行哈哈2
自定义title内容

给表格定义复杂的内容有两种方式,这取决于你使用哪种表格结构定义方式:

  1. scheme属性定义方式:直接传入vNode当做title属性
  2. TableColumn组件定义方式:通过title扩展点传入自定义内容
index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
表头
多选1
多选2
表头
单选1
单选2
表头
不可选1
不可选2
选择框的类型

通过checkType设置行选择类型,checkbox多选(默认) / radio单选 / none不可选

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
radio不指定rowKey
赋默认值选中
不选中
radio指定为item的id
选中
不选中
checkbox不指定rowKey
赋默认值选中
不选中
赋默认值选中,可设置多个
checkbox指定为item的id
选中
不选中
行选中

通过checkedKey(radio类型)或者checkedKeys(checkbox类型)来控制哪些列被选中,默认他们的取值为行的索引或索引数组。但我们也可以通过rowKey函数为每一行指定唯一的key,此时他们的取值为key值或key值的数组

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
表头1
表头2
第一行哈哈2
第二行哈哈2
表头1
表头2
第一行哈哈2
第二行哈哈2
行高亮

Table添加rowSelectable属性,可以让表格点击行时高亮改行,你可以指定值为multiple来支持多行高亮。类似checkedKeys,我们可以通过selectedKeys来绑定高亮行的key,当高亮的行改变时,组件也会抛出$change:selectedKeys事件,我们可以通过getSelectedData来获取高亮行的数据

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
点击整行不选中
B
AB
A点我不会选中整行
点击整行选中
B
A任何位置都可以哦~
A点我会选中整行
整行选中

当行可选时,默认点击该行的任意区域都可选中或取消选中,但我们可以通过将rowCheckbable设为false来关闭这一特性。

选中的数据默认会在每一行的元素上有k-checked样式名

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
偶数行背景变换
1
2
3
4
5
偶数行背景变换
1
2
3
4
5
行样式

rowClassName:给行添加样式,类型Function,默认:function(value, index) { },该函数返回的字符串将被当做className添加到该行上

你也可以直接添加stripe属性,使相邻行展示不同的背景色

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
点击整行展开内容
Javey
Jiawei
点击+,展开内容
Javey
Jiawei
行展开

通过expandblock指定行展开后的模板内容。是否支持点击该行任何区域都展开内容,是由rowExpandable控制的,默认情况下它为true。你也可以将它设为false,来自定义展开逻辑。例如:点击某个icon后展开改行,而点击其它元素无效。自定义展开逻辑,需要调用shrinkRow(key)expandRow(key)方法来实现收起和展开,或者修改expandedKeys属性值,来指定哪些key对应的行展开。

  • rowExpandable:是否点击整行即展开,类型Boolean,默认true
  • expandedKeys:指定哪些key对应行展开,类型Array,默认[]
index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
奇数行不可点击
1
2
3
4
5
禁用行可选

disableRow:禁用某一行可选状态,类型:Function,默认:function(data, index) { return false },该函数如果返回true,则表示禁用该行可选

禁用的数据默认会在每一行的元素上有k-disabled样式

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
100px
表头固定,但内容没有超出最高高度
100px
表头固定啦
下拉
yeah!
表头固定

fixHeader:设置表头固定,类型Boolean | Number,默认:false

  1. 如果取值为Booleanfalse表示不固定表头,true表示固定高度,但需要自己定义表格高度
  2. 如果取值为Number,则表示,当表格超出该高度时即展示滚动条,并固定表头
index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
姓名
性别
Javeymale
Lisafemale
表头吸顶

stickHeader:设置表头是否当表格滚动超出规定高度时,将表头固定在页面顶部,类型Boolean | Number,默认:false

  1. 如果取值为Booleanfalse表示不吸顶,true表示吸顶,此时等价于0,表示固定的位置的top0
  2. 如果取值为Number,用来指定固定的位置距离视窗顶部的距离,例如本例中,固定在top = 50px的地方
index.vdt
index.js
index.vue (Vue)
index.jsx (React)
Name
Column1
Column2
Column3
Column4
Action
Johntesttesttesttestaction
Tomtesttesttesttestaction
Javeytesttesttesttestaction
横向滚动条吸底

stickScrollbar:当出现横向滚动条时,设置是否当表格底部没有滚动到视窗中时,将横向滚动条固定在页面底部,类型Boolean | Number,默认:false

  1. 如果取值为Booleanfalse表示不吸底,true表示吸底,此时等价于0,表示固定的位置的bottom0
  2. 如果取值为Number,用来指定固定位置距离视窗底部的距离
index.vdt
index.js
index.vue (Vue)
index.jsx (React)
Name
Column1
Column2
Column3
Column4
Action
Johntesttesttesttestaction
Tomtesttesttesttestaction
Javeytesttesttesttestaction
Name
Column1
Column2
Column3
Column4
Action
Johntesttesttesttestaction
Tomtesttesttesttestaction
Javeytesttesttesttestaction
Name
Column1
Column2
Column3
Column4
Action
Johntesttesttesttestaction
Tomtesttesttesttestaction
Javeytesttesttesttestaction
Name
Column1
Column2
Column3
Column4
Action
Johntesttesttesttestaction
Tomtesttesttesttestaction
Javeytesttesttesttestaction
Name
Column1
Column2
Column3
Column4
Action
Johntesttesttesttestaction
Tomtesttesttesttestaction
Javeytesttesttesttestaction
Name
Column1
Column2
Column3
Column4
Action
Johntesttesttesttestaction
Tomtesttesttesttestaction
Javeytesttesttesttestaction
列固定

TableColumn或者scheme添加fixed属性,可以将列固定,其中left固定在左侧,right固定在右侧;固定的列依然支持resizable表头拖动,stickHeader表头吸顶,以及fixHeader表头固定

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
表头1
表头2
/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~
表头1
表头2
这里没有数据(自定义版本)
表头1
表头2
没有数据
自定义无内容时的展示信息

data为空数组[]时, 可设置noDataTemplate来展示提示信息(默认为: /(ㄒoㄒ)/~~ 没有找到亲要的数据哦~)。或者你也可以通过no-data扩展点,来定义内容

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
姓名
年龄
aa1
cc5
bb9
姓名
年龄
aa1
cc5
bb9
排序

通过sort属性来指定当前表格的排序方式。它的数据格式如下:

{ key: '当前排序的列的key', type: '当前排序方式(desc: 降序,asc: 升序)' }

当该列可排序时,只需要在定义表格结构的scheme或者TableColumn中加入sortable并且取值为true即可

当排序方式改变时,可以监听默认事件$change:sort来执行自定义排序逻辑

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
类型
属性
border类型type="border"
类型
属性
grid类型type="grid"
类型

通过type设置表格的类型:default | border | grid

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
名称
状态(全部)
主机1运行中
主机2已关闭
主机3运行中
名称
状态
主机1运行中
主机2已关闭
主机3运行中
分组

分组需要两个group来指定:

  1. 第一个是Table上的group属性,该属性指定当前分组的方式,形式为:{["分组的列的key"]: ["当前列选择的分组的值"]}
  2. 第二个是TableColumn或者scheme上的group属性,该属性指定当前列有哪些可选的分组方式, 如果该列支持多选,还可以添加multiple属性,默认为单选。形式为:[{label: "分组展示文案", value: "选择后的值"}]

当分组方式改变时,可以监听默认事件$change:group来执行自定义分组逻辑

group属性不会双向绑定,所以在改变时,你应该同步更新当前属性值(sort也一样)

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
通过minColWidth控制最小宽度100px
单独设置最小宽度300px
标题
ABC
ABC
通过minColWidth控制最小宽度100px
单独设置最小宽度300px
标题
ABC
ABC
表头是否可拖动

resizable:表头是否可拖动,类型Booleanfalse(默认)

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
表头1
表头2
第一行哈哈2
第二行哈哈2
第三行哈哈3
切换loading状态:
加载状态

Table添加loading属性,即可展示加载状态

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
定义该列单元格内容
普通文本
自定义导出文本
操作
第一行哈哈1
自定义1
删除
第二行哈哈2
自定义2
删除
导出表格

调用TableexportTable([data, [filename]])方法,可以导出当前表格内容成csv格式。导出的文本默认为当前单元格下的textContent内容,当需要自定义导出文本时,我们可以给单元格首个Element元素添加data-text属性来指定。另外如果给当前列设置ignore属性,则会忽略该列内容,例如:本例中我们忽略”操作“栏内容

  1. data 要导出的数据,默认为当前表格的数据
  2. filename 下载的文件名,默认为table
index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

属性

Table

属性 说明 类型 默认值
data 表格数据 Array []
scheme 定义表格结构:表头,单元格内容 Object {}
checkType 当行可选择时,定义选择的类型: 单选 "radio" , 复选 "checkbox", 不可选"none" "checkbox" | "radio" | "none" "checkbox"
noDataTemplate 当没有数据的时候展示的内容 String | vNode "/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~"
fixHeader 表头固定,给定需要固定高度的具体数值,当超出改值时,展示滚动条 Boolean | Number | String false
stickHeader 表头吸顶,给定需要吸顶的高度,表格滚动超出该高度时,将表头固定在顶部 Boolean | Number | String false
stickScrollbar 当出现横向滚动条时,设置是否当表格底部没有滚动到视窗中时,将横向滚动条固定在页面底部;取值为Number类型时,用来指定距离视窗底部的距离 Boolean | Number | String false
rowKey 设置行的key Function function(value, index) { return index; }
checkedKeys 通过key数组来指定哪些行被选中(针对多选) Array []
checkedKey 通过key指定哪行被选中(针对单选) String undefined
resizable 是否可以表头拖动 Boolean false
rowCheckable 当行可选时,是否点击该行任意区域都可选中 Boolean true
rowClassName 通过一个函数定义行的className,该函数会传入该行数据和索引当做参数,返回的字符串将被设为该行className Function function(value, index) { }
disableRow 定义行禁用可选的逻辑,返回true,则改行被禁用选择 Function function(data, index) { return false }
rowExpandable 是否点击改行任意区域即展开 Boolean true
expandedKeys 通过key来指定哪些行展开 Array []
type 表格类型,默认左右无边框,"border"类型会添加边框, "grid"类型会展示栅格边框 "default" | "border" | "grid" "default"
sort 排序,详见示例说明 Object {}
group 分组,详见示例说明 Object {}
minColWidth 指定所有列拖动时的最小宽度 Number 40
loading 是否展示加载状态 Boolean false
container 指定group弹出菜单追加的位置,默认:Dialog类型的组件会追加到Dialog中,其他会追加到body中。你可以传入函数返回一个DOM用来作为插入的容器,或者传入字符串用来给querySelector进行查询 Function | String undefined
stripe 相邻行是否展示不同的背景色 Boolean false
rowSelectable 是否点击行时高亮改行,取值为multiple时,可以同时高亮多行 Boolean | "single" &#124 "multiple" false
selectedKeys rowSelectable取值为非false时,指定哪些行高亮 Array []

TableColumn

除了通过Tablescheme属性指定表格的结构外,还以通过TableColumn来指定,它的属性值跟scheme数据结构一一对应

属性 说明 类型 默认值
title 标题 String ""
template 指定当前列,单元格渲染模板函数 Function (data, index) => {},
key 指定当前列的key必须指定,并且为了保证顺序正确,不要以数字开头 String ""
sortable 是否可排序 Boolean false
width 列宽,可以指定百分比或像素(像素不需要加单位) String undefined
group 指定分组数组,每一项格式为{value: '选中后的值', label: '展示的文案'} Array<Object> undefined
multiple 分组是否支持多选 Boolean false
minWidth 指定当前列拖动时的最小宽度,优先级高于TableminColWidth Number 40
fix 是否将列固定,"left"固定在左侧;"right"固定在右侧 "left" | "right" undefined
className 给当前列添加className String | Object undefined
ignore 是否忽略当前列的导出 Boolean false
align 当前列对齐方式 "left" | "center" | "right" undefined

扩展点

Table

名称 说明 参数
no-data 自定义无数据展示模板 -
expand 指定行展开后要展示的模板内容 data, index

TableColumn

名称 说明 参数
title 自定义复杂表头内容 -
template 自定义单元格内容 data, index
default template扩展点等价,为了方便vue中使用的别名 data, index

方法

Table

方法名 说明 参数 返回值
getCheckedData 获取选中数据信息 - Array
getSelectedData 获取高亮行数据信息 - Array
checkAll 全部选中 - undefined
uncheckAll 全不选中 - undefined
isCheckAll 判断是否全选 - Boolean
isChecked 判断某行是否选中 key Boolean
checkRow 选中某行 key undefined
uncheckRow 取消选中某行 key undefined
expandRow 展开某行 key undefined
shrinkRow 收起某行 key undefined

事件

Table

事件名 说明 参数
$change:checked 选中的数据变化会触发的事件 instance, newValue, oldValue