Ys-vue NPM | npm.io

TABLE文档

variables

组件配置属性，详情见下面Option属性

参数	说明	类型	可选值	默认值
data	显示数据	Array	-	-
option	组件配置属性，详情见下面Option属性	Object	-	-

Option Attributes

参数	说明	类型	可选值	默认值
column	显示列表组，详情见下面Column属性	Array	-	-
propEmptyDefault	列表没有值时，默认显示的值	String	-	-
isLoading	是否正在加载中	Boolean	true/false	false
isMenu	是否显示操作列	Boolean	true/false	true
isPagination	是否显示分页	Boolean	true/false	false
paginationCurrent	当前页码	Number	-	-
paginationSize	每一页加载多少条数据	Number	-	-
paginationTotal	总页数	Number	-	-
paginationPageSizes	分页信息	Array	-	10, 20, 30, 40
menuLabel	操作列的标题	String	-	操作
menuWidth	操作列的宽度	String	-	操作
menuAlign	操作列的对齐方式	String	left/center/right	right
menuFixed	操作列是否固定在左侧或者右侧，true 表示固定在左侧	String/Boolean	left/true/right	-
isMenuEdit	是否显示编辑按钮	Boolean	true/false	true
menuEditTitle	显示编辑按钮的文本	String	-	编辑
isMenuDelete	是否显示删除按钮	Boolean	true/false	true
menuDeleteTitle	显示删除按钮的文本	String	-	删除
menuEditOption	编辑按钮类型时的按钮属性,详情查看一下的menuEditOption/menuDeleteOption Attributes	Object	-	-
menuDeleteOption	删除按钮类型时的按钮属性,详情查看一下的menuEditOption/menuDeleteOption Attributes	Object	-	-
emptyText	数据为空时文案,也可以设置slot->empty	String	-	暂无数据
isIndex	是否显示序列号	Boolean	true/false	false
indexLabel	序列号头部标题	String	-	#
indexMethod	序列号自定义索引，例如：indexMethod(index) {return index * 2;}	number, Function(index)	-	-
indexWidth	序列号列的宽度	String	-	50
indexFixed	序列号列的宽度	String/Boolean	left/true/right	-
indexAlign	序列号列的宽度	String	left/center/right	-
isExpand	是否可展开模式	Boolean	true/false	false
expandLabel	展开模式头部标题	String	-	-
expandWidth	展开模式列的宽度	String	-	50
expandFixed	展开模式列是否固定在左侧或者右侧，true 表示固定在左侧	String/Boolean	left/true/right	-
expandAlign	展开模式的对齐方式	String	left/center/right	-
slotExpand	展开模式的插槽，返回的数据：data当前列数据，index列索引	-	-	-
isSelection	是否可多选模式	Boolean	true/false	false
selectionLabel	多选模式头部标题	String	-	-
selectionWidth	多选模式列的宽度	String	-	50
selectionFixed	多选模式列是否固定在左侧或者右侧，true 表示固定在左侧	String/Boolean	left/true/right	-
selectionAlign	多选模式的对齐方式	String	left/center/right	-
height	Table 的高度，默认为自动高度。	String/Number	-	-
maxHeight	Table 的最大高度，例如：50、150px	String/Number	-	-
border	是否带有纵向边框	Boolean	true/false	false
style	Table 的尺寸	String	medium / small / mini	-
showHeader	是否显示表头	Boolean	true/false	false
highlightCurrentRow	是否要高亮当前行	Boolean	true/false	false
currentRowKey	当前行的 key	String,Number	-	-

Column Attributes

参数	说明	类型	可选值	默认值
slotHeader	当前列插槽头部自定义插槽	String	-	-
slotName	当前列插槽，返回的数据：data当前列数据，index列索引	String	-	-
label	标题	String	-	-
colType	对应列的类型，同element-ui type	String	selection/index/expand	-
indexMethod	只有在colType =index有效，序列号自定义索引，例如：indexMethod(index) {return index * 2;}	number, Function(index)	-	-
columnKey	column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件	String	-	-
width	列的宽度	String	-	-
minWidth	列的最小宽度	String	-	-
fixed	操作列是否固定在左侧或者右侧，true 表示固定在左侧	String/Boolean	left/true/right	-
renderHeader	列标题 Label 区域渲染使用的 Function	Function	-	-
sortable	对应列是否可以排序	Boolean	true/false	false
sortMethod	对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致	Function	-	-
sortBy	指定数据按照哪个属性进行排序	String/Array/Function(row, index)	-	-
sortOrders	数据在排序时所使用排序策略的轮转顺序，参考element-ui sort-orders	-	-	-
resizable	对应列是否可以通过拖动改变宽度，参考element-ui resizable	-	-	-
formatter	用来格式化内容	-	-	-
showOverflowTooltip	当内容过长被隐藏时显示 tooltip	Boolean	true/false	false
align	列的对齐方式	String	left/center/right	-
className	class 名称	String	-	-

Events

事件名	说明
handleEdit	点击编辑按钮，返回值，scope
handleDelete	点击删除按钮，返回值，scope
paginationChance	在isPagination=true时，页码改变回调事件
selectionChange	当选择项发生变化时会触发该事件
$emit	当用户手动勾选数据行的 Checkbox 时触发的事件
selectAll	当用户手动勾选全选 Checkbox 时触发的事件
sortChange	当表格的排序条件发生变化的时候会触发该事件
rowClick	当某一行被点击时会触发该事件
rowDblclick	当某个单元格被双击击时会触发该事件
cellMouseEnter	当单元格 hover 进入时会触发该事件
cellMouseLeave	当单元格 hover 退出时会触发该事件
cellClick	当某个单元格被点击时会触发该事件
cellDblclick	当某个单元格被双击击时会触发该事件
currentRowChange	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
expandChange	当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）
rowContextmenu	当某一行被鼠标右键点击时会触发该事件
headerClick	当某一列的表头被点击时会触发该事件
headerDragend	当拖动表头改变了列的宽度的时候会触发该事件

Methods

方法名	说明	说明
clearSelection	用于多选表格，清空用户的选择	-
toggleAllSelection	用于多选表格，切换所有行的选中状态	-
clearSort	用于清空排序条件，数据会恢复成未排序的状态	-
doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法	-
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected
toggleRowExpansion	用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）	row, selected
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row
clearFilter	不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件	columnKey
sort	不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件	prop: string, order: string

Slot 插槽

事件名	说明
menu	右边操作栏插槽
menuHeader	右边操作栏头部自定义
slotPagination	分页左边的插槽，只有在isPagination = true时有效

编辑列按钮类型时的按钮属性

参数	说明	类型	可选值	默认值
size	按钮尺寸String	medium / small / mini	mini
type	按钮类型，删除按钮默认为danger	String	primary / success / warning / danger / info / text	-
plain	是否朴素按钮	Boolean	true/false	false
round	是否圆角按钮	Boolean	true/false	false
circle	是否圆形按钮	Boolean	true/false	false
loading	是否加载中状态	Boolean	true/false	false
icon	图标类名	String	-	-
style	按钮style	String	-	-