element/packages/table

element-table

A element-table component for Vue.js.

Demo

http://element-component.github.io/element-table

Installation

npm i element-table -D

Usage

import Vue from 'vue'
import ElTable from 'element-table'
import 'element-theme-chalk'

Vue.use(ElTable)

or

import Vue from 'vue'
import { ElTable } from 'element-table'
import { ElTableColumn } from 'element-table'

Vue.component('el-table', ElTable)
Vue.component('el-table-column', ElTableColumn)

Table Attributes

参数	说明	类型	可选值	默认值
data	显示的数据	array	—	—
height	Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。	string/number	—	—
stripe	是否为斑马纹 table	boolean	—	false
border	是否带有纵向边框	boolean	—	false
fit	列的宽度是否自撑开	boolean	—	true
show-header	是否显示表头	boolean	-	true
highlight-current-row	是否要高亮当前行	boolean	—	false
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function(row, index)/String	—	—
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	Function(row, index)/Object	—	—
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的	Function(row)/String	—	—

Table Events

事件名	说明	参数
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
selection-change	当选择项发生变化时会触发该事件	selection
cell-mouse-enter	当单元格 hover 进入时会触发该事件	row, column, cell, event
cell-mouse-leave	当单元格 hover 退出时会触发该事件	row, column, cell, event
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
row-click	当某一行被点击时会触发该事件	row, event
row-dblclick	当某一行被双击时会触发该事件	row, event
header-click	当某一列的表头被点击时会触发该事件	column, event
sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow

Table Methods

方法名	说明	参数
clearSelection	清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法	selection
toggleRowSelection	切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected

Table-column Attributes

参数	说明	类型	可选值	默认值
type	对应列的类型。如果设置了 selection 则显示多选框，如果设置了 index 则显示该行的索引（从 1 开始计算）	string	selection/index	—
label	显示的标题	string	—	—
prop	对应列内容的字段名，也可以使用 property 属性	string	—	—
width	对应列的宽度	string	—	—
min-width	对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列	string	—	—
fixed	列是否固定在左侧或者右侧，true 表示固定在左侧	string, boolean	true, left, right	—
render-header	列标题 Label 区域渲染使用的 Function	Function(h, { column, $index })	—	—
sortable	对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件	boolean, string	true, false, 'custom'	false
sort-method	对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效	Function(a, b)	—	—
sort-by	对数据进行排序的时候按照 sort-by 排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 0 个排序，如果第 0 个相等，再按照第 1 个排序，以此类推。	Function(row, index)/String/Array	—	—
resizable	对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）	boolean	—	true
formatter	用来格式化内容	Function(row, column)	—	—
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	Boolean	—	false
inline-template	指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。总共可以获取到 { row(当前行), column(当前列), $index(行数), store(table store) } 以及 Table 所处的上下文环境。	—	—
align	对齐方式	String	left, center, right	left
class-name	列的 className	string	—	—
selectable	仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选	Function(row, index)	—	—
reserve-selection	仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。	Boolean	—	false
filters	数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。	Array[{ text, value }]	—	—
filter-multiple	数据过滤的选项是否多选	Boolean	—	true
filter-method	数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。	Function(value, row)	—	—
filtered-value	选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。	Array	—	—

Development

make dev

## test
make test

## build
make build

License

MIT