Table

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

WARNING

全力开发中

基础表格

2016-05-03	Tom	No. 189, Grove St, Los Angeles
2016-05-02	Tom	No. 189, Grove St, Los Angeles
2016-05-04	Tom	No. 189, Grove St, Los Angeles
2016-05-01	Tom	No. 189, Grove St, Los Angeles

基础的表格展示用法。

当 cl-table 元素中注入 data 对象数组后，在 cl-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。可以使用 width 属性来定义列宽。

<template>
  <cl-table class="vp-raw" :data="tableData" style="width: 100%">
    <cl-table-column prop="date" label="Date" width="180" />
    <cl-table-column prop="name" label="Name" width="180" />
    <cl-table-column prop="address" label="Address" />
  </cl-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  }
];
</script>
<style>
.vp-doc table {
  display: table;
  border-collapse: collapse;
  margin: 0;
  overflow-x: auto;
}
</style>

带斑马纹表格

2016-05-03	Tom	No. 189, Grove St, Los Angeles
2016-05-02	Tom	No. 189, Grove St, Los Angeles
2016-05-04	Tom	No. 189, Grove St, Los Angeles
2016-05-01	Tom	No. 189, Grove St, Los Angeles

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

stripe 可以创建带斑马纹的表格。如果 true, 表格将会带有斑马纹。

<template>
  <cl-table class="vp-raw" :data="tableData" stripe style="width: 100%">
    <cl-table-column prop="date" label="Date" width="180" />
    <cl-table-column prop="name" label="Name" width="180" />
    <cl-table-column prop="address" label="Address" />
  </cl-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  }
];
</script>

超出滚动

2016-05-03	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	CA 90036
2016-05-02	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	CA 90036
2016-05-04	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	CA 90036
2016-05-01	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	CA 90036
2016-05-08	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	CA 90036
2016-05-06	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	CA 90036
2016-05-07	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	CA 90036

当cl-table限制宽高时。超出滚动，默认固定表头

<template>
  <cl-table class="vp-raw" :data="tableData" stripe style="width: 100%; height: 200px">
    <cl-table-column fixed prop="date" label="Date" width="150" />
    <cl-table-column prop="name" label="Name" width="120" />
    <cl-table-column prop="state" label="State" width="120" />
    <cl-table-column prop="city" label="City" width="320" />
    <cl-table-column prop="address" label="Address" width="600" />
    <cl-table-column prop="zip" label="Zip" />
  </cl-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  }
];
</script>

Table API

Table Attributes

属性	描述	类型	默认值
data	表格数据	array	[]
tableLayout	表格布局	string	fixed
showHeader	是否显示表头	boolean	true
stripe	是否显示斑马纹	boolean	false
width	表格宽度	string / number	undefined
height	表格高度	string / number	undefined
maxHeight	表格最大高度	string / number	undefined
scrollbarAlwaysOn	总是显示滚动条	boolean	false

Table Column Attributes

属性	描述	类型	默认值
prop	对应列内容的字段名	string	—
label	显示的列名	string	—
type	列的类型	string	—
width	列的宽度	number / string	—
minWidth	列的最小宽度	number / string	—

Table ​

基础表格 ​

带斑马纹表格 ​

超出滚动 ​

Table API ​

Table Attributes ​