Cyberpunk Vue

# Table 表格

基础用法

基础的表格展示用法。

Name
Age
Address
Options
John Brown 32 New York No. 1 Lake Park
Jim Green 42 London No. 1 Lake Park
Joe Black 32 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park 
<c-table
  bordered
  :selectedItems="false"
  :dataSource="tableDataSource"
>
  <c-table-column text="Name" field="name" ></c-table-column>
  <c-table-column text="Age" field="age"></c-table-column>
  <c-table-column text="Address" field="address"></c-table-column>
  <c-table-column text="Options" field="options" :width="150">
    <template  slot-scope="props">
      <c-button>{{props.name}}Edit</c-button>
      <c-button>{{props.name}}Delete</c-button>
    </template>
  </c-table-column>
</c-table>
显示代码

带斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。

Name
Age
Address
Options
John Brown 32 New York No. 1 Lake Park
Jim Green 42 London No. 1 Lake Park
Joe Black 32 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park 
<c-table
  stripe
  bordered
  :selectedItems="false"
  :dataSource="tableDataSource2"
>
  <c-table-column text="Name" field="name" ></c-table-column>
  <c-table-column text="Age" field="age"></c-table-column>
  <c-table-column text="Address" field="address"></c-table-column>
  <c-table-column text="Options" field="options" :width="150">
    <template  slot-scope="props">
      <c-button>{{props.name}}Edit</c-button>
      <c-button>{{props.name}}Delete</c-button>
    </template>
  </c-table-column>
</c-table>
显示代码

多选

选择多行数据时使用 Checkbox。

Name
Age
Address
Options
John Brown 32 New York No. 1 Lake Park
Jim Green 42 London No. 1 Lake Park
Joe Black 32 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park 
<c-table
  bordered
  :selectedItems.sync="selectedItems"
  :dataSource="tableDataSource3"
>
  <c-table-column text="Name" field="name" ></c-table-column>
  <c-table-column text="Age" field="age"></c-table-column>
  <c-table-column text="Address" field="address"></c-table-column>
  <c-table-column text="Options" field="options" :width="150">
    <template  slot-scope="props">
      <c-button>{{props.name}}Edit</c-button>
      <c-button>{{props.name}}Delete</c-button>
    </template>
  </c-table-column>
</c-table>
显示代码

排序

对表格进行排序，可快速查找或对比数据。

Name
Age
Address
Options
John Brown 32 New York No. 1 Lake Park
Jim Green 42 London No. 1 Lake Park
Joe Black 32 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park 
<c-table
  bordered
  :dataSource="tableDataSource4"
  :selected-items="false"
  :order-by.sync="orderBy"
  :loading="tableLoading"
  @update:orderBy="onOrderChange"
>
  <c-table-column text="Name" field="name" ></c-table-column>
  <c-table-column text="Age" field="age"></c-table-column>
  <c-table-column text="Address" field="address"></c-table-column>
  <c-table-column text="Options" field="options" :width="150">
    <template  slot-scope="props">
      <c-button>{{props.name}}Edit</c-button>
      <c-button>{{props.name}}Delete</c-button>
    </template>
  </c-table-column>
</c-table>
显示代码

展开行

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

Name
Age
Address
Options
John Brown 32 New York No. 1 Lake Park
Jim Green 42 London No. 1 Lake Park
Joe Black 32 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park
Disabled User 99 Sidney No. 1 Lake Park 
<c-table
  bordered
  :dataSource="tableDataSource5"
  :selected-items="false"
  expend-key="description"
>
  <c-table-column text="Name" field="name" ></c-table-column>
  <c-table-column text="Age" field="age"></c-table-column>
  <c-table-column text="Address" field="address"></c-table-column>
  <c-table-column text="Options" field="options" :width="150">
    <template  slot-scope="props">
      <c-button>{{props.name}}Edit</c-button>
      <c-button>{{props.name}}Delete</c-button>
    </template>
  </c-table-column>
</c-table>
显示代码

Table 属性

参数 说明 类型 可选值 默认值
dataSource 显示的数据 Array —— ——
orderBy 排序字段 Object —— ——
stripe 是否为斑马纹 table Boolean —— false
bordered 是否带有纵向边框 Boolean —— false
loading 是否显示加载动画 Boolean —— false
rowKey 唯一字段 string —— id
expendKey 展开字段 string —— ——
selectedItems 是否显示多选框，且可绑定选中值 Array —— ——
selectionChange 勾选复选框时的回调 Function —— ——

Table-Column 属性

参数 说明 类型 可选值 默认值
text 表头字段显示名称 Sting —— ——
field 表头字段唯一Key Sting —— ——
width 表头列宽 Number —— ——

←