• Table 表格
    • 概述
    • 代码示例
    • 高级示例
    • API
      • Table props
      • Table events
      • Table slot
      • Table methods
      • column

    Table 表格

    概述

    主要用于展示大量结构化数据。

    支持排序、筛选、分页、自定义操作、导出 csv 等复杂功能。

    注意：非 template/render 模式下，需使用 i-table。

    Table 从 3.2.0 版本开始，支持 slot-scope，查看示例。

    代码示例

    Table 表格 - 图1

    基础用法

    表格的最简单用法。

    1. <template>
    2.     <Table :columns="columns1" :data="data1"></Table>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 columns1: [
    9.                     {
    10.                         title: 'Name',
    11.                         key: 'name'
    12.                     },
    13.                     {
    14.                         title: 'Age',
    15.                         key: 'age'
    16.                     },
    17.                     {
    18.                         title: 'Address',
    19.                         key: 'address'
    20.                     }
    21.                 ],
    22.                 data1: [
    23.                     {
    24.                         name: 'John Brown',
    25.                         age: 18,
    26.                         address: 'New York No. 1 Lake Park',
    27.                         date: '2016-10-03'
    28.                     },
    29.                     {
    30.                         name: 'Jim Green',
    31.                         age: 24,
    32.                         address: 'London No. 1 Lake Park',
    33.                         date: '2016-10-01'
    34.                     },
    35.                     {
    36.                         name: 'Joe Black',
    37.                         age: 30,
    38.                         address: 'Sydney No. 1 Lake Park',
    39.                         date: '2016-10-02'
    40.                     },
    41.                     {
    42.                         name: 'Jon Snow',
    43.                         age: 26,
    44.                         address: 'Ottawa No. 2 Lake Park',
    45.                         date: '2016-10-04'
    46.                     }
    47.                 ]
    48.             }
    49.         }
    50.     }
    51. </script>

    Table 表格 - 图2

    斑马纹

    设置属性 stripe ，表格会间隔显示不同颜色，用于区分不同行数据。

    1. <template>
    2.     <Table stripe :columns="columns1" :data="data1"></Table>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 columns1: [
    9.                     {
    10.                         title: 'Name',
    11.                         key: 'name'
    12.                     },
    13.                     {
    14.                         title: 'Age',
    15.                         key: 'age'
    16.                     },
    17.                     {
    18.                         title: 'Address',
    19.                         key: 'address'
    20.                     }
    21.                 ],
    22.                 data1: [
    23.                     {
    24.                         name: 'John Brown',
    25.                         age: 18,
    26.                         address: 'New York No. 1 Lake Park',
    27.                         date: '2016-10-03'
    28.                     },
    29.                     {
    30.                         name: 'Jim Green',
    31.                         age: 24,
    32.                         address: 'London No. 1 Lake Park',
    33.                         date: '2016-10-01'
    34.                     },
    35.                     {
    36.                         name: 'Joe Black',
    37.                         age: 30,
    38.                         address: 'Sydney No. 1 Lake Park',
    39.                         date: '2016-10-02'
    40.                     },
    41.                     {
    42.                         name: 'Jon Snow',
    43.                         age: 26,
    44.                         address: 'Ottawa No. 2 Lake Park',
    45.                         date: '2016-10-04'
    46.                     }
    47.                 ]
    48.             }
    49.         }
    50.     }
    51. </script>

    Table 表格 - 图3

    带边框

    添加表格的边框线。

    1. <template>
    2.     <Table border :columns="columns1" :data="data1"></Table>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 columns1: [
    9.                     {
    10.                         title: 'Name',
    11.                         key: 'name'
    12.                     },
    13.                     {
    14.                         title: 'Age',
    15.                         key: 'age'
    16.                     },
    17.                     {
    18.                         title: 'Address',
    19.                         key: 'address'
    20.                     }
    21.                 ],
    22.                 data1: [
    23.                     {
    24.                         name: 'John Brown',
    25.                         age: 18,
    26.                         address: 'New York No. 1 Lake Park',
    27.                         date: '2016-10-03'
    28.                     },
    29.                     {
    30.                         name: 'Jim Green',
    31.                         age: 24,
    32.                         address: 'London No. 1 Lake Park',
    33.                         date: '2016-10-01'
    34.                     },
    35.                     {
    36.                         name: 'Joe Black',
    37.                         age: 30,
    38.                         address: 'Sydney No. 1 Lake Park',
    39.                         date: '2016-10-02'
    40.                     },
    41.                     {
    42.                         name: 'Jon Snow',
    43.                         age: 26,
    44.                         address: 'Ottawa No. 2 Lake Park',
    45.                         date: '2016-10-04'
    46.                     }
    47.                 ]
    48.             }
    49.         }
    50.     }
    51. </script>

    Table 表格 - 图4

    特定样式

    行：通过属性 row-class-name 可以给某一行指定一个样式名称。

    列：通过给列 columns 设置字段 className 可以给某一列指定一个样式。

    单元格：通过给数据 data 设置字段 cellClassName 可以给任意一个单元格指定样式。

    1. <style>
    2.     .ivu-table .demo-table-info-row td{
    3.         background-color: #2db7f5;
    4.         color: #fff;
    5.     }
    6.     .ivu-table .demo-table-error-row td{
    7.         background-color: #ff6600;
    8.         color: #fff;
    9.     }
    10.     .ivu-table td.demo-table-info-column{
    11.         background-color: #2db7f5;
    12.         color: #fff;
    13.     }
    14.     .ivu-table .demo-table-info-cell-name {
    15.         background-color: #2db7f5;
    16.         color: #fff;
    17.     }
    18.     .ivu-table .demo-table-info-cell-age {
    19.         background-color: #ff6600;
    20.         color: #fff;
    21.     }
    22.     .ivu-table .demo-table-info-cell-address {
    23.         background-color: #187;
    24.         color: #fff;
    25.     }
    26. </style>
    27. <template>
    28.     <p>Custom row styles:</p>
    29.     <Table :row-class-name="rowClassName" :columns="columns1" :data="data1"></Table>
    30.     <p>Custom column styles:</p>
    31.     <Table :columns="columns9" :data="data1"></Table>
    32.     <p>Custom arbitrary cell styles:</p>
    33.     <Table :columns="columns1" :data="data8"></Table>
    34. </template>
    35. <script>
    36.     export default {
    37.         data () {
    38.             return {
    39.                 columns1: [
    40.                     {
    41.                         title: 'Name',
    42.                         key: 'name'
    43.                     },
    44.                     {
    45.                         title: 'Age',
    46.                         key: 'age'
    47.                     },
    48.                     {
    49.                         title: 'Address',
    50.                         key: 'address'
    51.                     }
    52.                 ],
    53.                 columns9: [
    54.                     {
    55.                         title: 'Name',
    56.                         key: 'name'
    57.                     },
    58.                     {
    59.                         title: 'Age',
    60.                         key: 'age',
    61.                         className: 'demo-table-info-column'
    62.                     },
    63.                     {
    64.                         title: 'Address',
    65.                         key: 'address'
    66.                     }
    67.                 ],
    68.                 data1: [
    69.                     {
    70.                         name: 'John Brown',
    71.                         age: 18,
    72.                         address: 'New York No. 1 Lake Park',
    73.                         date: '2016-10-03'
    74.                     },
    75.                     {
    76.                         name: 'Jim Green',
    77.                         age: 24,
    78.                         address: 'London No. 1 Lake Park',
    79.                         date: '2016-10-01'
    80.                     },
    81.                     {
    82.                         name: 'Joe Black',
    83.                         age: 30,
    84.                         address: 'Sydney No. 1 Lake Park',
    85.                         date: '2016-10-02'
    86.                     },
    87.                     {
    88.                         name: 'Jon Snow',
    89.                         age: 26,
    90.                         address: 'Ottawa No. 2 Lake Park',
    91.                         date: '2016-10-04'
    92.                     }
    93.                 ],
    94.                 data8: [
    95.                     {
    96.                         name: 'John Brown',
    97.                         age: 18,
    98.                         address: 'New York No. 1 Lake Park'
    99.                     },
    100.                     {
    101.                         name: 'Jim Green',
    102.                         age: 25,
    103.                         address: 'London No. 1 Lake Park',
    104.                         cellClassName: {
    105.                             age: 'demo-table-info-cell-age',
    106.                             address: 'demo-table-info-cell-address'
    107.                         }
    108.                     },
    109.                     {
    110.                         name: 'Joe Black',
    111.                         age: 30,
    112.                         address: 'Sydney No. 1 Lake Park'
    113.                     },
    114.                     {
    115.                         name: 'Jon Snow',
    116.                         age: 26,
    117.                         address: 'Ottawa No. 2 Lake Park',
    118.                         cellClassName: {
    119.                             name: 'demo-table-info-cell-name'
    120.                         }
    121.                     }
    122.                 ]
    123.             }
    124.         },
    125.         methods: {
    126.             rowClassName (row, index) {
    127.                 if (index === 1) {
    128.                     return 'demo-table-info-row';
    129.                 } else if (index === 3) {
    130.                     return 'demo-table-error-row';
    131.                 }
    132.                 return '';
    133.             }
    134.         }
    135.     }
    136. </script>

    Table 表格 - 图5

    固定表头

    通过设置属性 height 给表格指定高度后，会自动固定表头。当纵向内容过多时可以使用。

    3.4.0 版本后也可以设置 max-height 属性。

    1. <template>
    2.     <Table height="200" :columns="columns1" :data="data2"></Table>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 columns1: [
    9.                     {
    10.                         title: 'Name',
    11.                         key: 'name'
    12.                     },
    13.                     {
    14.                         title: 'Age',
    15.                         key: 'age'
    16.                     },
    17.                     {
    18.                         title: 'Address',
    19.                         key: 'address'
    20.                     }
    21.                 ],
    22.                 data2: [
    23.                     {
    24.                         name: 'John Brown',
    25.                         age: 18,
    26.                         address: 'New York No. 1 Lake Park',
    27.                         date: '2016-10-03'
    28.                     },
    29.                     {
    30.                         name: 'Jim Green',
    31.                         age: 24,
    32.                         address: 'London No. 1 Lake Park',
    33.                         date: '2016-10-01'
    34.                     },
    35.                     {
    36.                         name: 'Joe Black',
    37.                         age: 30,
    38.                         address: 'Sydney No. 1 Lake Park',
    39.                         date: '2016-10-02'
    40.                     },
    41.                     {
    42.                         name: 'Jon Snow',
    43.                         age: 26,
    44.                         address: 'Ottawa No. 2 Lake Park',
    45.                         date: '2016-10-04'
    46.                     },
    47.                     {
    48.                         name: 'John Brown',
    49.                         age: 18,
    50.                         address: 'New York No. 1 Lake Park',
    51.                         date: '2016-10-03'
    52.                     },
    53.                     {
    54.                         name: 'Jim Green',
    55.                         age: 24,
    56.                         address: 'London No. 1 Lake Park',
    57.                         date: '2016-10-01'
    58.                     },
    59.                     {
    60.                         name: 'Joe Black',
    61.                         age: 30,
    62.                         address: 'Sydney No. 1 Lake Park',
    63.                         date: '2016-10-02'
    64.                     },
    65.                     {
    66.                         name: 'Jon Snow',
    67.                         age: 26,
    68.                         address: 'Ottawa No. 2 Lake Park',
    69.                         date: '2016-10-04'
    70.                     }
    71.                 ]
    72.             }
    73.         }
    74.     }
    75. </script>

    Table 表格 - 图6

    固定列

    通过给数据 columns 的项设置 fixed 为 left 或 right，可以左右固定需要的列。当横向内容过多时可以使用。

    1. <template>
    2.     <Table width="550" border :columns="columns2" :data="data3"></Table>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 columns2: [
    9.                     {
    10.                         title: 'Name',
    11.                         key: 'name',
    12.                         width: 100,
    13.                         fixed: 'left'
    14.                     },
    15.                     {
    16.                         title: 'Age',
    17.                         key: 'age',
    18.                         width: 100
    19.                     },
    20.                     {
    21.                         title: 'Province',
    22.                         key: 'province',
    23.                         width: 100
    24.                     },
    25.                     {
    26.                         title: 'City',
    27.                         key: 'city',
    28.                         width: 100
    29.                     },
    30.                     {
    31.                         title: 'Address',
    32.                         key: 'address',
    33.                         width: 200
    34.                     },
    35.                     {
    36.                         title: 'Postcode',
    37.                         key: 'zip',
    38.                         width: 100
    39.                     },
    40.                     {
    41.                         title: 'Action',
    42.                         key: 'action',
    43.                         fixed: 'right',
    44.                         width: 120,
    45.                         render: (h, params) => {
    46.                             return h('div', [
    47.                                 h('Button', {
    48.                                     props: {
    49.                                         type: 'text',
    50.                                         size: 'small'
    51.                                     }
    52.                                 }, 'View'),
    53.                                 h('Button', {
    54.                                     props: {
    55.                                         type: 'text',
    56.                                         size: 'small'
    57.                                     }
    58.                                 }, 'Edit')
    59.                             ]);
    60.                         }
    61.                     }
    62.                 ],
    63.                 data3: [
    64.                     {
    65.                         name: 'John Brown',
    66.                         age: 18,
    67.                         address: 'New York No. 1 Lake Park',
    68.                         province: 'America',
    69.                         city: 'New York',
    70.                         zip: 100000
    71.                     },
    72.                     {
    73.                         name: 'Jim Green',
    74.                         age: 24,
    75.                         address: 'Washington, D.C. No. 1 Lake Park',
    76.                         province: 'America',
    77.                         city: 'Washington, D.C.',
    78.                         zip: 100000
    79.                     },
    80.                     {
    81.                         name: 'Joe Black',
    82.                         age: 30,
    83.                         address: 'Sydney No. 1 Lake Park',
    84.                         province: 'Australian',
    85.                         city: 'Sydney',
    86.                         zip: 100000
    87.                     },
    88.                     {
    89.                         name: 'Jon Snow',
    90.                         age: 26,
    91.                         address: 'Ottawa No. 2 Lake Park',
    92.                         province: 'Canada',
    93.                         city: 'Ottawa',
    94.                         zip: 100000
    95.                     }
    96.                 ]
    97.             }
    98.         }
    99.     }
    100. </script>

    Table 表格 - 图7

    固定表头和列

    同时应用上述两个属性，可以同时固定表头和列。

    1. <template>
    2.     <Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 columns2: [
    9.                     {
    10.                         title: 'Name',
    11.                         key: 'name',
    12.                         width: 100,
    13.                         fixed: 'left'
    14.                     },
    15.                     {
    16.                         title: 'Age',
    17.                         key: 'age',
    18.                         width: 100
    19.                     },
    20.                     {
    21.                         title: 'Province',
    22.                         key: 'province',
    23.                         width: 100
    24.                     },
    25.                     {
    26.                         title: 'City',
    27.                         key: 'city',
    28.                         width: 100
    29.                     },
    30.                     {
    31.                         title: 'Address',
    32.                         key: 'address',
    33.                         width: 200
    34.                     },
    35.                     {
    36.                         title: 'Postcode',
    37.                         key: 'zip',
    38.                         width: 100
    39.                     },
    40.                     {
    41.                         title: 'Action',
    42.                         key: 'action',
    43.                         fixed: 'right',
    44.                         width: 120,
    45.                         render: (h, params) => {
    46.                             return h('div', [
    47.                                 h('Button', {
    48.                                     props: {
    49.                                         type: 'text',
    50.                                         size: 'small'
    51.                                     }
    52.                                 }, 'View'),
    53.                                 h('Button', {
    54.                                     props: {
    55.                                         type: 'text',
    56.                                         size: 'small'
    57.                                     }
    58.                                 }, 'Edit')
    59.                             ]);
    60.                         }
    61.                     }
    62.                 ],
    63.                 data4: [
    64.                     {
    65.                         name: 'John Brown',
    66.                         age: 18,
    67.                         address: 'New York No. 1 Lake Park',
    68.                         province: 'America',
    69.                         city: 'New York',
    70.                         zip: 100000
    71.                     },
    72.                     {
    73.                         name: 'Jim Green',
    74.                         age: 24,
    75.                         address: 'Washington, D.C. No. 1 Lake Park',
    76.                         province: 'America',
    77.                         city: 'Washington, D.C.',
    78.                         zip: 100000
    79.                     },
    80.                     {
    81.                         name: 'Joe Black',
    82.                         age: 30,
    83.                         address: 'Sydney No. 1 Lake Park',
    84.                         province: 'Australian',
    85.                         city: 'Sydney',
    86.                         zip: 100000
    87.                     },
    88.                     {
    89.                         name: 'Jon Snow',
    90.                         age: 26,
    91.                         address: 'Ottawa No. 2 Lake Park',
    92.                         province: 'Canada',
    93.                         city: 'Ottawa',
    94.                         zip: 100000
    95.                     },
    96.                     {
    97.                         name: 'John Brown',
    98.                         age: 18,
    99.                         address: 'New York No. 1 Lake Park',
    100.                         province: 'America',
    101.                         city: 'New York',
    102.                         zip: 100000
    103.                     },
    104.                     {
    105.                         name: 'Jim Green',
    106.                         age: 24,
    107.                         address: 'Washington, D.C. No. 1 Lake Park',
    108.                         province: 'America',
    109.                         city: 'Washington, D.C.',
    110.                         zip: 100000
    111.                     },
    112.                     {
    113.                         name: 'Joe Black',
    114.                         age: 30,
    115.                         address: 'Sydney No. 1 Lake Park',
    116.                         province: 'Australian',
    117.                         city: 'Sydney',
    118.                         zip: 100000
    119.                     },
    120.                     {
    121.                         name: 'Jon Snow',
    122.                         age: 26,
    123.                         address: 'Ottawa No. 2 Lake Park',
    124.                         province: 'Canada',
    125.                         city: 'Ottawa',
    126.                         zip: 100000
    127.                     }
    128.                 ]
    129.             }
    130.         }
    131.     }
    132. </script>

    Table 表格 - 图8

    单选

    通过设置属性 highlight-row，可以选中某一行。

    当选择时，触发事件 @on-current-change，可以自定义操作，事件返回两个值 currentRow 和 oldCurrentRow，分别为当前行的数据和上一次选择的数据。

    通过给 columns 数据设置一项，指定 type: 'index'，可以自动显示一个从 1 开始的索引列。使用 indexMethod 可以自定义序号。

    给 data 项设置特殊 key _highlight: true 可以默认选中当前项。

    调用 clearCurrentRow 方法可以手动清除选中项。

    1. <template>
    2.     <div>
    3.         <Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table>
    4.         <Button @click="handleClearCurrentRow">Clear</Button>
    5.     </div>
    6. </template>
    7. <script>
    8.     export default {
    9.         data () {
    10.             return {
    11.                 columns3: [
    12.                     {
    13.                         type: 'index',
    14.                         width: 60,
    15.                         align: 'center'
    16.                     },
    17.                     {
    18.                         title: 'Name',
    19.                         key: 'name'
    20.                     },
    21.                     {
    22.                         title: 'Age',
    23.                         key: 'age'
    24.                     },
    25.                     {
    26.                         title: 'Address',
    27.                         key: 'address'
    28.                     }
    29.                 ],
    30.                 data1: [
    31.                     {
    32.                         name: 'John Brown',
    33.                         age: 18,
    34.                         address: 'New York No. 1 Lake Park',
    35.                         date: '2016-10-03'
    36.                     },
    37.                     {
    38.                         name: 'Jim Green',
    39.                         age: 24,
    40.                         address: 'London No. 1 Lake Park',
    41.                         date: '2016-10-01'
    42.                     },
    43.                     {
    44.                         name: 'Joe Black',
    45.                         age: 30,
    46.                         address: 'Sydney No. 1 Lake Park',
    47.                         date: '2016-10-02'
    48.                     },
    49.                     {
    50.                         name: 'Jon Snow',
    51.                         age: 26,
    52.                         address: 'Ottawa No. 2 Lake Park',
    53.                         date: '2016-10-04'
    54.                     }
    55.                 ]
    56.             }
    57.         },
    58.         methods: {
    59.             handleClearCurrentRow () {
    60.                 this.$refs.currentRowTable.clearCurrentRow();
    61.             }
    62.         }
    63.     }
    64. </script>

    Table 表格 - 图9

    多选

    通过给 columns 数据设置一项，指定 type: 'selection'，即可自动开启多选功能。

    给 data 项设置特殊 key _checked: true 可以默认选中当前项。

    给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。

    正确使用好以下事件，可以达到需要的效果：

    • @on-select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。
    • @on-select-all，点击全选时触发，返回值为 selection，已选项。
    • @on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。
    1. <template>
    2.     <div>
    3.         <Table border ref="selection" :columns="columns4" :data="data1"></Table>
    4.         <Button @click="handleSelectAll(true)">Set all selected</Button>
    5.         <Button @click="handleSelectAll(false)">Cancel all selected</Button>
    6.     </div>
    7. </template>
    8. <script>
    9.     export default {
    10.         data () {
    11.             return {
    12.                 columns4: [
    13.                     {
    14.                         type: 'selection',
    15.                         width: 60,
    16.                         align: 'center'
    17.                     },
    18.                     {
    19.                         title: 'Name',
    20.                         key: 'name'
    21.                     },
    22.                     {
    23.                         title: 'Age',
    24.                         key: 'age'
    25.                     },
    26.                     {
    27.                         title: 'Address',
    28.                         key: 'address'
    29.                     }
    30.                 ],
    31.                 data1: [
    32.                     {
    33.                         name: 'John Brown',
    34.                         age: 18,
    35.                         address: 'New York No. 1 Lake Park',
    36.                         date: '2016-10-03'
    37.                     },
    38.                     {
    39.                         name: 'Jim Green',
    40.                         age: 24,
    41.                         address: 'London No. 1 Lake Park',
    42.                         date: '2016-10-01'
    43.                     },
    44.                     {
    45.                         name: 'Joe Black',
    46.                         age: 30,
    47.                         address: 'Sydney No. 1 Lake Park',
    48.                         date: '2016-10-02'
    49.                     },
    50.                     {
    51.                         name: 'Jon Snow',
    52.                         age: 26,
    53.                         address: 'Ottawa No. 2 Lake Park',
    54.                         date: '2016-10-04'
    55.                     }
    56.                 ]
    57.             }
    58.         },
    59.         methods: {
    60.             handleSelectAll (status) {
    61.                 this.$refs.selection.selectAll(status);
    62.             }
    63.         }
    64.     }
    65. </script>

    Table 表格 - 图10

    排序

    通过给 columns 数据的项，设置 sortable: true，即可对该列数据进行排序。

    排序默认使用升序和降序，也可以通过设置属性 sortMethod 指定一个自定义排序函数，接收三个参数 a 、 b 和 type。

    通过给某一列设置 sortType 可以在初始化时使用排序。

    如果使用远程排序，可以设置 sortable: 'custom'，然后在触发排序事件 @on-sort-change后，进行远程排序，并手动设置新的 data，详见 API。

    注意，排序并不会影响到源数据 data。

    1. <template>
    2.     <Table border :columns="columns5" :data="data5"></Table>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 columns5: [
    9.                     {
    10.                         title: 'Date',
    11.                         key: 'date',
    12.                         sortable: true
    13.                     },
    14.                     {
    15.                         title: 'Name',
    16.                         key: 'name'
    17.                     },
    18.                     {
    19.                         title: 'Age',
    20.                         key: 'age',
    21.                         sortable: true
    22.                     },
    23.                     {
    24.                         title: 'Address',
    25.                         key: 'address'
    26.                     }
    27.                 ],
    28.                 data5: [
    29.                     {
    30.                         name: 'John Brown',
    31.                         age: 18,
    32.                         address: 'New York No. 1 Lake Park',
    33.                         date: '2016-10-03'
    34.                     },
    35.                     {
    36.                         name: 'Jim Green',
    37.                         age: 24,
    38.                         address: 'London No. 1 Lake Park',
    39.                         date: '2016-10-01'
    40.                     },
    41.                     {
    42.                         name: 'Joe Black',
    43.                         age: 30,
    44.                         address: 'Sydney No. 1 Lake Park',
    45.                         date: '2016-10-02'
    46.                     },
    47.                     {
    48.                         name: 'Jon Snow',
    49.                         age: 26,
    50.                         address: 'Ottawa No. 2 Lake Park',
    51.                         date: '2016-10-04'
    52.                     }
    53.                 ]
    54.             }
    55.         }
    56.     }
    57. </script>

    Table 表格 - 图11

    筛选

    通过给 columns 数据的项，设置 filters，可进行筛选，filters 接收一个数组，详见 Demo 和 API。

    必须指定一个筛选函数 filterMethod 才可以进行筛选，filterMethod 传入两个参数 value 和 row，详见 Demo 和 API。

    如果指定 filterMultiple: false，则使用单选，默认为多选。

    注意，筛选并不会影响到源数据 data。

    1. <template>
    2.     <Table border :columns="columns6" :data="data5"></Table>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 columns6: [
    9.                     {
    10.                         title: 'Date',
    11.                         key: 'date'
    12.                     },
    13.                     {
    14.                         title: 'Name',
    15.                         key: 'name'
    16.                     },
    17.                     {
    18.                         title: 'Age',
    19.                         key: 'age',
    20.                         filters: [
    21.                             {
    22.                                 label: 'Greater than 25',
    23.                                 value: 1
    24.                             },
    25.                             {
    26.                                 label: 'Less than 25',
    27.                                 value: 2
    28.                             }
    29.                         ],
    30.                         filterMultiple: false,
    31.                         filterMethod (value, row) {
    32.                             if (value === 1) {
    33.                                 return row.age > 25;
    34.                             } else if (value === 2) {
    35.                                 return row.age < 25;
    36.                             }
    37.                         }
    38.                     },
    39.                     {
    40.                         title: 'Address',
    41.                         key: 'address',
    42.                         filters: [
    43.                             {
    44.                                 label: 'New York',
    45.                                 value: 'New York'
    46.                             },
    47.                             {
    48.                                 label: 'London',
    49.                                 value: 'London'
    50.                             },
    51.                             {
    52.                                 label: 'Sydney',
    53.                                 value: 'Sydney'
    54.                             }
    55.                         ],
    56.                         filterMethod (value, row) {
    57.                             return row.address.indexOf(value) > -1;
    58.                         }
    59.                     }
    60.                 ],
    61.                 data5: [
    62.                     {
    63.                         name: 'John Brown',
    64.                         age: 18,
    65.                         address: 'New York No. 1 Lake Park',
    66.                         date: '2016-10-03'
    67.                     },
    68.                     {
    69.                         name: 'Jim Green',
    70.                         age: 24,
    71.                         address: 'London No. 1 Lake Park',
    72.                         date: '2016-10-01'
    73.                     },
    74.                     {
    75.                         name: 'Joe Black',
    76.                         age: 30,
    77.                         address: 'Sydney No. 1 Lake Park',
    78.                         date: '2016-10-02'
    79.                     },
    80.                     {
    81.                         name: 'Jon Snow',
    82.                         age: 26,
    83.                         address: 'Ottawa No. 2 Lake Park',
    84.                         date: '2016-10-04'
    85.                     }
    86.                 ],
    87.             }
    88.         }
    89.     }
    90. </script>

    Table 表格 - 图12

    自定义列模板

    通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。

    render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。

    学习 Render 函数的内容

    1. <template>
    2.     <Table border :columns="columns7" :data="data6"></Table>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 columns7: [
    9.                     {
    10.                         title: 'Name',
    11.                         key: 'name',
    12.                         render: (h, params) => {
    13.                             return h('div', [
    14.                                 h('Icon', {
    15.                                     props: {
    16.                                         type: 'person'
    17.                                     }
    18.                                 }),
    19.                                 h('strong', params.row.name)
    20.                             ]);
    21.                         }
    22.                     },
    23.                     {
    24.                         title: 'Age',
    25.                         key: 'age'
    26.                     },
    27.                     {
    28.                         title: 'Address',
    29.                         key: 'address'
    30.                     },
    31.                     {
    32.                         title: 'Action',
    33.                         key: 'action',
    34.                         width: 150,
    35.                         align: 'center',
    36.                         render: (h, params) => {
    37.                             return h('div', [
    38.                                 h('Button', {
    39.                                     props: {
    40.                                         type: 'primary',
    41.                                         size: 'small'
    42.                                     },
    43.                                     style: {
    44.                                         marginRight: '5px'
    45.                                     },
    46.                                     on: {
    47.                                         click: () => {
    48.                                             this.show(params.index)
    49.                                         }
    50.                                     }
    51.                                 }, 'View'),
    52.                                 h('Button', {
    53.                                     props: {
    54.                                         type: 'error',
    55.                                         size: 'small'
    56.                                     },
    57.                                     on: {
    58.                                         click: () => {
    59.                                             this.remove(params.index)
    60.                                         }
    61.                                     }
    62.                                 }, 'Delete')
    63.                             ]);
    64.                         }
    65.                     }
    66.                 ],
    67.                 data6: [
    68.                     {
    69.                         name: 'John Brown',
    70.                         age: 18,
    71.                         address: 'New York No. 1 Lake Park'
    72.                     },
    73.                     {
    74.                         name: 'Jim Green',
    75.                         age: 24,
    76.                         address: 'London No. 1 Lake Park'
    77.                     },
    78.                     {
    79.                         name: 'Joe Black',
    80.                         age: 30,
    81.                         address: 'Sydney No. 1 Lake Park'
    82.                     },
    83.                     {
    84.                         name: 'Jon Snow',
    85.                         age: 26,
    86.                         address: 'Ottawa No. 2 Lake Park'
    87.                     }
    88.                 ]
    89.             }
    90.         },
    91.         methods: {
    92.             show (index) {
    93.                 this.$Modal.info({
    94.                     title: 'User Info',
    95.                     content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
    96.                 })
    97.             },
    98.             remove (index) {
    99.                 this.data6.splice(index, 1);
    100.             }
    101.         }
    102.     }
    103. </script>

    Table 表格 - 图13

    slot-scope 写法

    从 3.2.0 版本开始支持 slot-scope 写法。

    在 columns 的某列声明 slot 后，就可以在 Table 的 slot 中使用 slot-scope。

    slot-scope 的参数有 3 个：当前行数据 row，当前列数据 column，当前行序号 index。

    查看使用 slot-scope 实现修改整行数据的示例

    1. <template>
    2.     <Table border :columns="columns12" :data="data6">
    3.         <template slot-scope="{ row }" slot="name">
    4.             <strong>{{ row.name }}</strong>
    5.         </template>
    6.         <template slot-scope="{ row, index }" slot="action">
    7.             <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
    8.             <Button type="error" size="small" @click="remove(index)">Delete</Button>
    9.         </template>
    10.     </Table>
    11. </template>
    12. <script>
    13.     export default {
    14.         data () {
    15.             return {
    16.                 columns12: [
    17.                     {
    18.                         title: 'Name',
    19.                         slot: 'name'
    20.                     },
    21.                     {
    22.                         title: 'Age',
    23.                         key: 'age'
    24.                     },
    25.                     {
    26.                         title: 'Address',
    27.                         key: 'address'
    28.                     },
    29.                     {
    30.                         title: 'Action',
    31.                         slot: 'action',
    32.                         width: 150,
    33.                         align: 'center'
    34.                     }
    35.                 ],
    36.                 data6: [
    37.                     {
    38.                         name: 'John Brown',
    39.                         age: 18,
    40.                         address: 'New York No. 1 Lake Park'
    41.                     },
    42.                     {
    43.                         name: 'Jim Green',
    44.                         age: 24,
    45.                         address: 'London No. 1 Lake Park'
    46.                     },
    47.                     {
    48.                         name: 'Joe Black',
    49.                         age: 30,
    50.                         address: 'Sydney No. 1 Lake Park'
    51.                     },
    52.                     {
    53.                         name: 'Jon Snow',
    54.                         age: 26,
    55.                         address: 'Ottawa No. 2 Lake Park'
    56.                     }
    57.                 ]
    58.             }
    59.         },
    60.         methods: {
    61.             show (index) {
    62.                 this.$Modal.info({
    63.                     title: 'User Info',
    64.                     content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
    65.                 })
    66.             },
    67.             remove (index) {
    68.                 this.data6.splice(index, 1);
    69.             }
    70.         }
    71.     }
    72. </script>

    Table 表格 - 图14

    可展开

    当表格内容较多不能一次性完全展示时使用。

    通过给 columns 数据设置一项，指定 type: 'expand'，即可开启扩展功能。

    给行数据 data 的某项设置 _expanded 为 true，可以默认展开当前行，设置 _disableExpand 可以禁用当前行的展开功能。

    渲染展开区域与自定义列模板方法类似，使用 render 函数。当内容较复杂时，可拆分为组件或使用 JSX。

    学习 Render 函数的内容

    1. // table-expand.vue
    2. <style scoped>
    3.     .expand-row{
    4.         margin-bottom: 16px;
    5.     }
    6. </style>
    7. <template>
    8.     <div>
    9.         <Row class="expand-row">
    10.             <Col span="8">
    11.                 <span class="expand-key">Job: </span>
    12.                 <span class="expand-value">{{ row.job }}</span>
    13.             </Col>
    14.             <Col span="8">
    15.                 <span class="expand-key">Interest: </span>
    16.                 <span class="expand-value">{{ row.interest }}</span>
    17.             </Col>
    18.             <Col span="8">
    19.                 <span class="expand-key">Birthday: </span>
    20.                 <span class="expand-value">{{ row.birthday }}</span>
    21.             </Col>
    22.         </Row>
    23.         <Row>
    24.             <Col span="8">
    25.                 <span class="expand-key">Favorite book: </span>
    26.                 <span class="expand-value">《{{ row.book }}》</span>
    27.             </Col>
    28.             <Col span="8">
    29.                 <span class="expand-key">Favorite movie: </span>
    30.                 <span class="expand-value">{{ row.movie }}</span>
    31.             </Col>
    32.             <Col span="8">
    33.                 <span class="expand-key">Favorite music: </span>
    34.                 <span class="expand-value">{{ row.music }}</span>
    35.             </Col>
    36.         </Row>
    37.     </div>
    38. </template>
    39. <script>
    40.     export default {
    41.         props: {
    42.             row: Object
    43.         }
    44.     };
    45. </script>
    47. // table.vue
    48. <template>
    49.     <Table :columns="columns10" :data="data9"></Table>
    50. </template>
    51. <script>
    52.     import expandRow from './table-expand.vue';
    53.     export default {
    54.         components: { expandRow },
    55.         data () {
    56.             return {
    57.                 columns10: [
    58.                     {
    59.                         type: 'expand',
    60.                         width: 50,
    61.                         render: (h, params) => {
    62.                             return h(expandRow, {
    63.                                 props: {
    64.                                     row: params.row
    65.                                 }
    66.                             })
    67.                         }
    68.                     },
    69.                     {
    70.                         title: 'Name',
    71.                         key: 'name'
    72.                     },
    73.                     {
    74.                         title: 'Age',
    75.                         key: 'age'
    76.                     },
    77.                     {
    78.                         title: 'Address',
    79.                         key: 'address'
    80.                     }
    81.                 ],
    82.                 data9: [
    83.                     {
    84.                         name: 'John Brown',
    85.                         age: 18,
    86.                         address: 'New York No. 1 Lake Park',
    87.                         job: 'Data engineer',
    88.                         interest: 'badminton',
    89.                         birthday: '1991-05-14',
    90.                         book: 'Steve Jobs',
    91.                         movie: 'The Prestige',
    92.                         music: 'I Cry'
    93.                     },
    94.                     {
    95.                         name: 'Jim Green',
    96.                         age: 25,
    97.                         address: 'London No. 1 Lake Park',
    98.                         job: 'Data Scientist',
    99.                         interest: 'volleyball',
    100.                         birthday: '1989-03-18',
    101.                         book: 'My Struggle',
    102.                         movie: 'Roman Holiday',
    103.                         music: 'My Heart Will Go On'
    104.                     },
    105.                     {
    106.                         name: 'Joe Black',
    107.                         age: 30,
    108.                         address: 'Sydney No. 1 Lake Park',
    109.                         job: 'Data Product Manager',
    110.                         interest: 'tennis',
    111.                         birthday: '1992-01-31',
    112.                         book: 'Win',
    113.                         movie: 'Jobs',
    114.                         music: 'Don’t Cry'
    115.                     },
    116.                     {
    117.                         name: 'Jon Snow',
    118.                         age: 26,
    119.                         address: 'Ottawa No. 2 Lake Park',
    120.                         job: 'Data Analyst',
    121.                         interest: 'snooker',
    122.                         birthday: '1988-7-25',
    123.                         book: 'A Dream in Red Mansions',
    124.                         movie: 'A Chinese Ghost Story',
    125.                         music: 'actor'
    126.                     }
    127.                 ]
    128.             }
    129.         }
    130.     }
    131. </script>

    Table 表格 - 图15

    表头分组

    给 column 设置 children，可以渲染出分组表头。

    1. <template>
    2.     <Table :columns="columns11" :data="data10" border height="500"></Table>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 columns11: [
    9.                     {
    10.                         title: 'Name',
    11.                         key: 'name',
    12.                         align: 'center',
    13.                         width: 200,
    14.                         fixed: 'left',
    15.                         filters: [
    16.                             {
    17.                                 label: 'Joe',
    18.                                 value: 1
    19.                             },
    20.                             {
    21.                                 label: 'John',
    22.                                 value: 2
    23.                             }
    24.                         ],
    25.                         filterMultiple: false,
    26.                         filterMethod (value, row) {
    27.                             if (value === 1) {
    28.                                 return row.name === 'Joe';
    29.                             } else if (value === 2) {
    30.                                 return row.name === 'John Brown';
    31.                             }
    32.                         }
    33.                     },
    34.                     {
    35.                         title: 'Other',
    36.                         align: 'center',
    37.                         children: [
    38.                             {
    39.                                 title: 'Age',
    40.                                 key: 'age',
    41.                                 align: 'center',
    42.                                 width: 200,
    43.                                 sortable: true
    44.                             },
    45.                             {
    46.                                 title: 'Address',
    47.                                 align: 'center',
    48.                                 children: [
    49.                                     {
    50.                                         title: 'Street',
    51.                                         key: 'street',
    52.                                         align: 'center',
    53.                                         width: 200
    54.                                     },
    55.                                     {
    56.                                         title: 'Block',
    57.                                         align: 'center',
    58.                                         children: [
    59.                                             {
    60.                                                 title: 'Building',
    61.                                                 key: 'building',
    62.                                                 align: 'center',
    63.                                                 width: 200,
    64.                                                 sortable: true
    65.                                             },
    66.                                             {
    67.                                                 title: 'Door No.',
    68.                                                 key: 'door',
    69.                                                 align: 'center',
    70.                                                 width: 200
    71.                                             }
    72.                                         ]
    73.                                     }
    74.                                 ]
    75.                             }
    76.                         ]
    77.                     },
    78.                     {
    79.                         title: 'Company',
    80.                         align: 'center',
    81.                         children: [
    82.                             {
    83.                                 title: 'Company Address',
    84.                                 key: 'caddress',
    85.                                 align: 'center',
    86.                                 width: 200
    87.                             },
    88.                             {
    89.                                 title: 'Company Name',
    90.                                 key: 'cname',
    91.                                 align: 'center',
    92.                                 width: 200
    93.                             }
    94.                         ]
    95.                     },
    96.                     {
    97.                         title: 'Gender',
    98.                         key: 'gender',
    99.                         align: 'center',
    100.                         width: 200,
    101.                         fixed: 'right'
    102.                     }
    103.                 ],
    104.                 data10: []
    105.             }
    106.         },
    107.         mounted () {
    108.             const data = [];
    109.             for (let i = 0; i < 20; i++) {
    110.                 data.push({
    111.                     key: i,
    112.                     name: 'John Brown',
    113.                     age: i + 1,
    114.                     street: 'Lake Park',
    115.                     building: 'C',
    116.                     door: 2035,
    117.                     caddress: 'Lake Street 42',
    118.                     cname: 'SoftLake Co',
    119.                     gender: 'M',
    120.                 });
    121.             }
    122.             this.data10 = data;
    123.         }
    124.     }
    125. </script>

    Table 表格 - 图16

    加载中

    通过设置属性 loading 可以让表格处于加载中状态，在异步请求数据、分页时建议使用。

    1. <template>
    2.     <div>
    3.         <Table :loading="loading" :columns="columns1" :data="data1"></Table>
    4.         <br>
    5.         Change Loading Status <Switch v-model="loading"></Switch>
    6.     </div>
    7. </template>
    8. <script>
    9.     export default {
    10.         data () {
    11.             return {
    12.                 loading: true,
    13.                 columns1: [
    14.                     {
    15.                         title: 'Name',
    16.                         key: 'name'
    17.                     },
    18.                     {
    19.                         title: 'Age',
    20.                         key: 'age'
    21.                     },
    22.                     {
    23.                         title: 'Address',
    24.                         key: 'address'
    25.                     }
    26.                 ],
    27.                 data1: [
    28.                     {
    29.                         name: 'John Brown',
    30.                         age: 18,
    31.                         address: 'New York No. 1 Lake Park',
    32.                         date: '2016-10-03'
    33.                     },
    34.                     {
    35.                         name: 'Jim Green',
    36.                         age: 24,
    37.                         address: 'London No. 1 Lake Park',
    38.                         date: '2016-10-01'
    39.                     },
    40.                     {
    41.                         name: 'Joe Black',
    42.                         age: 30,
    43.                         address: 'Sydney No. 1 Lake Park',
    44.                         date: '2016-10-02'
    45.                     },
    46.                     {
    47.                         name: 'Jon Snow',
    48.                         age: 26,
    49.                         address: 'Ottawa No. 2 Lake Park',
    50.                         date: '2016-10-04'
    51.                     }
    52.                 ]
    53.             }
    54.         }
    55.     }
    56. </script>

    Table 表格 - 图17

    尺寸

    通过设置属性 size 为 large 或 small 可以调整表格尺寸为大或小，默认不填或填写 default 为中。

    1. <template>
    2.     <Table size="large" :columns="columns1" :data="data1"></Table>
    3.     <Table size="small" :columns="columns1" :data="data1"></Table>
    4. </template>
    5. <script>
    6.     export default {
    7.         data () {
    8.             return {
    9.                 columns1: [
    10.                     {
    11.                         title: 'Name',
    12.                         key: 'name'
    13.                     },
    14.                     {
    15.                         title: 'Age',
    16.                         key: 'age'
    17.                     },
    18.                     {
    19.                         title: 'Address',
    20.                         key: 'address'
    21.                     }
    22.                 ],
    23.                 data1: [
    24.                     {
    25.                         name: 'John Brown',
    26.                         age: 18,
    27.                         address: 'New York No. 1 Lake Park',
    28.                         date: '2016-10-03'
    29.                     },
    30.                     {
    31.                         name: 'Jim Green',
    32.                         age: 24,
    33.                         address: 'London No. 1 Lake Park',
    34.                         date: '2016-10-01'
    35.                     },
    36.                     {
    37.                         name: 'Joe Black',
    38.                         age: 30,
    39.                         address: 'Sydney No. 1 Lake Park',
    40.                         date: '2016-10-02'
    41.                     },
    42.                     {
    43.                         name: 'Jon Snow',
    44.                         age: 26,
    45.                         address: 'Ottawa No. 2 Lake Park',
    46.                         date: '2016-10-04'
    47.                     }
    48.                 ]
    49.             }
    50.         }
    51.     }
    52. </script>

    Table 表格 - 图18

    导出csv

    通过调用 exportCsv() 方法，可以将数据导出为 .csv 的表格文件，详见 API。

    说明：

    • 支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。
    • IE9、Safari 需要手动修改后缀名为 .csv。
    • IE9暂时只支持英文，中文会显示为乱码。
    1. <template>
    2.     <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
    3.     <br>
    4.     <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> Export source data</Button>
    5.     <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>
    6.     <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> Export custom data</Button>
    7. </template>
    8. <script>
    9.     export default {
    10.         data () {
    11.             return {
    12.                 columns8: [
    13.                     {
    14.                         "title": "Name",
    15.                         "key": "name",
    16.                         "fixed": "left",
    17.                         "width": 200
    18.                     },
    19.                     {
    20.                         "title": "Show",
    21.                         "key": "show",
    22.                         "width": 150,
    23.                         "sortable": true,
    24.                         filters: [
    25.                             {
    26.                                 label: 'Greater than 4000',
    27.                                 value: 1
    28.                             },
    29.                             {
    30.                                 label: 'Less than 4000',
    31.                                 value: 2
    32.                             }
    33.                         ],
    34.                         filterMultiple: false,
    35.                         filterMethod (value, row) {
    36.                             if (value === 1) {
    37.                                 return row.show > 4000;
    38.                             } else if (value === 2) {
    39.                                 return row.show < 4000;
    40.                             }
    41.                         }
    42.                     },
    43.                     {
    44.                         "title": "Weak",
    45.                         "key": "weak",
    46.                         "width": 150,
    47.                         "sortable": true
    48.                     },
    49.                     {
    50.                         "title": "Signin",
    51.                         "key": "signin",
    52.                         "width": 150,
    53.                         "sortable": true
    54.                     },
    55.                     {
    56.                         "title": "Click",
    57.                         "key": "click",
    58.                         "width": 150,
    59.                         "sortable": true
    60.                     },
    61.                     {
    62.                         "title": "Active",
    63.                         "key": "active",
    64.                         "width": 150,
    65.                         "sortable": true
    66.                     },
    67.                     {
    68.                         "title": "7, retained",
    69.                         "key": "day7",
    70.                         "width": 150,
    71.                         "sortable": true
    72.                     },
    73.                     {
    74.                         "title": "30, retained",
    75.                         "key": "day30",
    76.                         "width": 150,
    77.                         "sortable": true
    78.                     },
    79.                     {
    80.                         "title": "The next day left",
    81.                         "key": "tomorrow",
    82.                         "width": 150,
    83.                         "sortable": true
    84.                     },
    85.                     {
    86.                         "title": "Day Active",
    87.                         "key": "day",
    88.                         "width": 150,
    89.                         "sortable": true
    90.                     },
    91.                     {
    92.                         "title": "Week Active",
    93.                         "key": "week",
    94.                         "width": 150,
    95.                         "sortable": true
    96.                     },
    97.                     {
    98.                         "title": "Month Active",
    99.                         "key": "month",
    100.                         "width": 150,
    101.                         "sortable": true
    102.                     }
    103.                 ],
    104.                 data7: [
    105.                     {
    106.                         "name": "Name1",
    107.                         "fav": 0,
    108.                         "show": 7302,
    109.                         "weak": 5627,
    110.                         "signin": 1563,
    111.                         "click": 4254,
    112.                         "active": 1438,
    113.                         "day7": 274,
    114.                         "day30": 285,
    115.                         "tomorrow": 1727,
    116.                         "day": 558,
    117.                         "week": 4440,
    118.                         "month": 5610
    119.                     },
    120.                     {
    121.                         "name": "Name2",
    122.                         "fav": 0,
    123.                         "show": 4720,
    124.                         "weak": 4086,
    125.                         "signin": 3792,
    126.                         "click": 8690,
    127.                         "active": 8470,
    128.                         "day7": 8172,
    129.                         "day30": 5197,
    130.                         "tomorrow": 1684,
    131.                         "day": 2593,
    132.                         "week": 2507,
    133.                         "month": 1537
    134.                     },
    135.                     {
    136.                         "name": "Name3",
    137.                         "fav": 0,
    138.                         "show": 7181,
    139.                         "weak": 8007,
    140.                         "signin": 8477,
    141.                         "click": 1879,
    142.                         "active": 16,
    143.                         "day7": 2249,
    144.                         "day30": 3450,
    145.                         "tomorrow": 377,
    146.                         "day": 1561,
    147.                         "week": 3219,
    148.                         "month": 1588
    149.                     },
    150.                     {
    151.                         "name": "Name4",
    152.                         "fav": 0,
    153.                         "show": 9911,
    154.                         "weak": 8976,
    155.                         "signin": 8807,
    156.                         "click": 8050,
    157.                         "active": 7668,
    158.                         "day7": 1547,
    159.                         "day30": 2357,
    160.                         "tomorrow": 7278,
    161.                         "day": 5309,
    162.                         "week": 1655,
    163.                         "month": 9043
    164.                     },
    165.                     {
    166.                         "name": "Name5",
    167.                         "fav": 0,
    168.                         "show": 934,
    169.                         "weak": 1394,
    170.                         "signin": 6463,
    171.                         "click": 5278,
    172.                         "active": 9256,
    173.                         "day7": 209,
    174.                         "day30": 3563,
    175.                         "tomorrow": 8285,
    176.                         "day": 1230,
    177.                         "week": 4840,
    178.                         "month": 9908
    179.                     },
    180.                     {
    181.                         "name": "Name6",
    182.                         "fav": 0,
    183.                         "show": 6856,
    184.                         "weak": 1608,
    185.                         "signin": 457,
    186.                         "click": 4949,
    187.                         "active": 2909,
    188.                         "day7": 4525,
    189.                         "day30": 6171,
    190.                         "tomorrow": 1920,
    191.                         "day": 1966,
    192.                         "week": 904,
    193.                         "month": 6851
    194.                     },
    195.                     {
    196.                         "name": "Name7",
    197.                         "fav": 0,
    198.                         "show": 5107,
    199.                         "weak": 6407,
    200.                         "signin": 4166,
    201.                         "click": 7970,
    202.                         "active": 1002,
    203.                         "day7": 8701,
    204.                         "day30": 9040,
    205.                         "tomorrow": 7632,
    206.                         "day": 4061,
    207.                         "week": 4359,
    208.                         "month": 3676
    209.                     },
    210.                     {
    211.                         "name": "Name8",
    212.                         "fav": 0,
    213.                         "show": 862,
    214.                         "weak": 6520,
    215.                         "signin": 6696,
    216.                         "click": 3209,
    217.                         "active": 6801,
    218.                         "day7": 6364,
    219.                         "day30": 6850,
    220.                         "tomorrow": 9408,
    221.                         "day": 2481,
    222.                         "week": 1479,
    223.                         "month": 2346
    224.                     },
    225.                     {
    226.                         "name": "Name9",
    227.                         "fav": 0,
    228.                         "show": 567,
    229.                         "weak": 5859,
    230.                         "signin": 128,
    231.                         "click": 6593,
    232.                         "active": 1971,
    233.                         "day7": 7596,
    234.                         "day30": 3546,
    235.                         "tomorrow": 6641,
    236.                         "day": 1611,
    237.                         "week": 5534,
    238.                         "month": 3190
    239.                     },
    240.                     {
    241.                         "name": "Name10",
    242.                         "fav": 0,
    243.                         "show": 3651,
    244.                         "weak": 1819,
    245.                         "signin": 4595,
    246.                         "click": 7499,
    247.                         "active": 7405,
    248.                         "day7": 8710,
    249.                         "day30": 5518,
    250.                         "tomorrow": 428,
    251.                         "day": 9768,
    252.                         "week": 2864,
    253.                         "month": 5811
    254.                     }
    255.                 ]
    256.             }
    257.         },
    258.         methods: {
    259.             exportData (type) {
    260.                 if (type === 1) {
    261.                     this.$refs.table.exportCsv({
    262.                         filename: 'The original data'
    263.                     });
    264.                 } else if (type === 2) {
    265.                     this.$refs.table.exportCsv({
    266.                         filename: 'Sorting and filtering data',
    267.                         original: false
    268.                     });
    269.                 } else if (type === 3) {
    270.                     this.$refs.table.exportCsv({
    271.                         filename: 'Custom data',
    272.                         columns: this.columns8.filter((col, index) => index < 4),
    273.                         data: this.data7.filter((data, index) => index < 4)
    274.                     });
    275.                 }
    276.             }      
    277.         }
    278.     }
    279. </script>

    高级示例

    以上示例已经基本涵盖了表格组件的所有功能，我们根据实际业务场景，增加了一些较为复杂的示例，可以结合来看，更深入了解表格组件的使用。

    API

    Table props

    属性说明类型默认值
    data显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称，因此数据不能使用该字段，详见示例特定样式。Array[]
    columns表格列的配置描述，具体项见后文Array[]
    stripe是否显示间隔斑马纹Booleanfalse
    border是否显示纵向边框Booleanfalse
    show-header是否显示表头Booleantrue
    width表格宽度，单位 pxNumber | String自动
    height表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头Number | String-
    max-height 3.4.0表格最大高度，单位 px，设置后，如果表格内容大于此值，会固定表头Number | String-
    loading表格是否加载中Booleanfalse
    disabled-hover禁用鼠标悬停时的高亮Booleanfalse
    highlight-row是否支持高亮选中的行，即单选Booleanfalse
    row-class-name 行的 className 的回调方法，传入参数：
    - row：当前行数据
    - index：当前行的索引    		Function-
    size表格尺寸，可选值为 large、small、default 或者不填String-
    no-data-text数据为空时显示的提示内容String暂无数据
    no-filtered-data-text筛选数据为空时显示的提示内容String暂无筛选结果
    draggable 3.3.0是否开启拖拽调整行顺序，需配合 @on-drag-drop 事件使用Booleanfalse
    tooltip-theme 3.3.0列使用 tooltip 时，配置它的主题，可选值为 dark 或 lightStringdark
    row-key 3.4.0是否强制使用内置的 row-key，开启后可能会影响性能Booleanfalse

    Table events

    事件名说明返回值
    on-current-change开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发
    - currentRow：当前高亮行的数据
    - oldCurrentRow：上一次高亮的数据
    on-select在多选模式下有效，选中某一项时触发
    - selection：已选项数据
    - row：刚选择的项数据
    on-select-cancel在多选模式下有效，取消选中某一项时触发
    - selection：已选项数据
    - row：取消选择的项数据
    on-select-all在多选模式下有效，点击全选时触发
    - selection：已选项数据
    on-select-all-cancel在多选模式下有效，点击取消全选时触发
    - selection：已选项数据
    on-selection-change在多选模式下有效，只要选中项发生变化时就会触发
    - selection：已选项数据
    on-sort-change排序时有效，当点击排序时触发
    - column：当前列数据
    - key：排序依据的指标
    - order：排序的顺序，值为 asc 或 desc
    on-filter-change筛选时有效，筛选条件发生变化时触发当前列数据
    on-row-click单击某一行时触发
    - 当前行的数据
    - index
    on-row-dblclick双击某一行时触发
    - 当前行的数据
    - index
    on-expand展开或收起某一行时触发
    - row：当前行的数据
    - status：当前的状态
    on-drag-drop 3.3.0拖拽排序松开时触发，返回置换的两行数据索引index1, index2

    Table slot

    名称说明
    header表头
    footer页脚
    loading加载中

    Table methods

    方法名说明参数
    exportCsv 将数据导出为 .csv 文件，说明：
    - 支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。
    - IE9、Safari 需要手动修改后缀名为 .csv。
    - IE9暂时只支持英文，中文会显示为乱码。    		 params(Object):
    - filename 文件名，默认为 table.csv
    - original 是否导出为原始数据，默认为 true
    - noHeader 不显示表头，默认为 false
    - columns 自定义导出的列数据
    - data 自定义导出的行数据
    - callback 添加此函数后，不会下载，而是返回数据
    - separator 数据分隔符，默认是逗号(,)
    - quoted 每项数据是否加引号，默认为 false 说明：columns 和 data 需同时声明，声明后将导出指定的数据，建议列数据有自定义render时，可以根据需求自定义导出内容
    clearCurrentRow清除高亮项，仅在开启 highlight-row 时可用无

    column

    列描述数据对象，是 columns 中的一项

    属性说明类型默认值
    type列类型，可选值为 index、selection、expand、htmlString-
    title列头显示文字String#
    key对应列内容的字段名String-
    width列宽Number-
    minWidth最小列宽Number-
    maxWidth最大列宽Number-
    align对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐Stringleft
    className列的样式名称String-
    fixed列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧String-
    ellipsis开启后，文本将不换行，超出部分显示为省略号Booleanfalse
    tooltip开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容Booleanfalse
    render自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。 学习 Render 函数的内容Function-
    renderHeader自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据和当前列索引。Function-
    indexMethodtype 为 index 时可用，自定义序号Function，参数 row 为当前行内容-
    sortable对应列是否可以排序，如果设置为 custom，则代表用户希望远程排序，需要监听 Table 的 on-sort-change 事件Boolean | 'custom'false
    sortMethod自定义排序使用的方法，接收三个参数 a 、 b 和 type，当设置 sortable: true 时有效。type 值为 asc 和 descFunction-
    sortType设置初始化排序。值为 asc 和 descString-
    filters过滤数据的选项，格式为数组，数组中每项包含 label 和 value 属性，使用过滤，必须同时配置 filterMethodArray-
    filterMethod数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示Function-
    filterMultiple数据过滤的选项是否多选Booleantrue
    filteredValue在初始化时使用过滤，数组，值为需要过滤的 value 集合Array-
    filterRemote使用远程过滤Function-
    children表头分组Array-