Goodwe-table NPM

goodwe-table

goodwe table, Extend the elmentUI

Install

npm install goodwe-table

Example

import {Table as GoodweTable, TableColumn as GoodweTableColumn} from 'goodwe-table';

export default {
    data() {
        return {
            data: {
                name: 'jack',
                age: 18,
            },
            {
                name: 'justin',
                age: 19,
            }
        }
    }
    components: {
        GoodweTable,
        GoodweTableColumn
    },
    render() {
        return <goodwe-table data={}>
            <goodwe-table-column label="student name" prop="name">
            </goodwe-table-column>
            <goodwe-table-column label="student age" prop="age">
            </goodwe-table-column>
        </goodwe-table>
    }
}

goodwe-table Attributes

参数	说明	类型	可选值	默认值
data	显示的数据	array	-	-
height	暂不支持	string / number	-	-
max-height	暂不支持	string / number	-	-
stripe	是否为斑马纹 table	boolean	-	false
border	是否带有纵向边框。多级表头时固定为true	boolean	-	false
show-header	是否显示表头	boolean	—	true
highlight-current-row	是否要高亮当前行	boolean	—	false
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function({row, rowIndex})/String	—	—
span-method	合并行或列的计算方法	Function({ row, column, rowIndex, columnIndex })	—	—

Table-column Scoped Slot

name	说明
--	自定义列的内容，参数为 { row, column, $index }
header	自定义表头的内容. 参数为 { column, $index }

Table Events

事件名	说明	参数
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
row-click	当某一行被点击时会触发该事件	row, column, event
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow