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