k-table

安装教程

npm i k-vue-table

使用教程

import 自定义名称 from "k-vue-table";

表格属性

属性	说明	类型	默认值
TdHeight	数据行行高	Number	30
field	表格列字段	Object	{}
data	表格数据	Array	[]
isColDrag	列是否可拖动	Boolean	false
row_key	选中时记录的数据,可多字段	Array	[]
reserveSelection	数据变更时是否保留上次选中数据 row_key有设置时才生效	Boolean	false
row_join	选中的对象的键组合字段	String	-
selectList	选中的数据（row_key有设置时键为数组用row_key的值使用row_join连接	Object	{}
clickShow	是否显示背景色	Boolean	false

表格事件

事件名	说明	返回值
checkBoxAll	多选模式下,点击全选时	selection：已选项数据
checkBoxOne	多选模式下,点击某行多选框时触发	selection：已选项数据, row:当前行数据
clickDetail	点击某一行触发	detail：当前行的数据, index:当前行的位置
scroll	表格滚动时触发	event
sort	字段排序点击返回	返回对应排序

表格列字段参数

属性	说明	类型	默认值
key	列字段名,当为selection时即多选模式	String	-
title	列头显示文字	String	-
width	列宽()	Number	-
sort	是否排序	Boolean	false
tooltip	是否显示title	Boolean	false
fixed	列是否固定在左侧或者右侧,可选值为 left 左侧和 right 右侧	String	-
renderHeader	自定义渲染标题,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 column(当前列参数) 和 index(当前key)	Function	-
render	自定义渲染列,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 column(当前列参数)、key(当前列key) 和 value(当前列数据)	Function	-
value	自定义方法。传入两个参数,第一个是当前行数据,第二个为当前行字段 返回值为显示内容	Function	-
align	内容对齐方式,可选值为 left 左侧和 right 右侧（为空则左右对齐）	String	-

表格方法

方法名	参数	默认值	说明	返回值
toggleCheckAll	Boolean	-	根据传入参数设置全选或清除所有选中	已选中的数据
invertSelection	-	-	反选	已选中的数据
scrollTo	Number	-	滚动到指定的行数	-
getScrollPosition	-	-	获取当前第一行在数组中的位置	当前第一行位置
setClickRow	Number	0	设置高亮的行	-
removeSort	-	-	清除排序	-