Table-Table

示例

代码

<div>
    <h4 style="margin: 10px">基础用法</h4>
    <div>
        <g-table :columns="columns"
                 :dataSource="dataSource"
        ></g-table>
    </div>
    <h4 style="margin: 10px">排序</h4>
    <div>
        <g-table :columns="columns"
                 :dataSource="dataSource"
                 :order-by.sync="orderBy"
        ></g-table>
    </div>
    <h4 style="margin: 10px">复选框</h4>
    <div>
        <g-table :columns="columns"
                 :dataSource="dataSource"
                 checkable
                 :selected-items.sync="selected"
        ></g-table>
    </div>
    <h4 style="margin: 10px">loading</h4>
    <g-button @click="()=>{this.isLoading = !this.isLoading}">Loading</g-button>
    <div>
        <g-table :columns="columns"
                 :dataSource="dataSource"
                 :loading="isLoading"
        ></g-table>
    </div>
    <h4 style="margin: 10px">固定表头</h4>
    <div>
        <g-table :columns="columns"
                 :dataSource="dataSourceFix"
                 fixed-header
                 :height="300"
        ></g-table>
    </div>
</div>

Attributes

参数 说明 类型 默认值
height 表格高度 Number
columns 表头字段(必填,必须指定宽度) Array
dataSource 表格数据 Array
order-by 是否排序 Boolean false
checkable 是否需要复选框 Boolean false
loading 是否显示加载loading Boolean false
fixed-header 是否固定表头 Boolean false