## Table 表格 主要用于展示大量结构化数据。 支持排序、筛选、分页、自定义操作、导出 csv 等复杂功能。 ### 代码示例 基础用法  ```html <template> <div class="container"> <cvu-table :columns="columns" :data="data"></cvu-table> </div> </template> <script> export default { data () { return { columns: [ { title: '集装箱号', key: 'handleValueTwo', align: 'center', tooltip: true }, { title: '运单号', key: 'handleValueFirst', align: 'center', tooltip: true }, { title: '预警内容', key: 'warningContent', align: 'center', tooltip: true }, { title: '预警通知人', key: 'organIdTranslate', align: 'center', tooltip: true } ], data: [ { handleValueTwo: 'HX000', handleValueFirst: 'FX34343', warningContent: '验封中', organIdTranslate: '张三' }, { handleValueTwo: 'HX000', handleValueFirst: 'FX34343', warningContent: '验封中', organIdTranslate: '张三' }, { handleValueTwo: 'HX000', handleValueFirst: 'FX34343', warningContent: '验封中', organIdTranslate: '张三' }, { handleValueTwo: 'HX000', handleValueFirst: 'FX34343', warningContent: '验封中', organIdTranslate: '张三' } ] } } } </script>> ``` 横向表格 >[info] 设置属性`theme`为'row'，自动隐藏表格头部，clumns中通过属性`align`控制当前列文字显示位置。  ```html <template> <div class="container"> <cvu-table :columns="columns" :data="data" theme="row"></cvu-table> </div> </template> <script> export default { data () { return { columns: [ { key: 'handleValueTwoTitle', align: 'right', tooltip: true }, { key: 'handleValueTwo', align: 'center', tooltip: true, slot: 'handleValueTwo' }, { key: 'handleValueFirstTitle', align: 'right', tooltip: true }, { key: 'handleValueFirst', align: 'center', tooltip: true }, { key: 'warningContentTitle', align: 'right', tooltip: true }, { key: 'warningContent', align: 'center', tooltip: true }, { key: 'organIdTranslateTitle', align: 'right', tooltip: true }, { key: 'organIdTranslate', align: 'center', tooltip: true } ], data: [ { handleValueTwoTitle: '集装箱号', handleValueTwo: 'HX000', handleValueFirstTitle: '运单号', handleValueFirst: 'FX34343', warningContentTitle: '预警内容', warningContent: '验封中', organIdTranslateTitle: '预警通知人', organIdTranslate: '张三' }, { handleValueTwoTitle: '集装箱号', handleValueTwo: 'HX000', handleValueFirstTitle: '运单号', handleValueFirst: 'FX34343', warningContentTitle: '预警内容', warningContent: '验封中', organIdTranslateTitle: '预警通知人', organIdTranslate: '张三' }, { handleValueTwoTitle: '集装箱号', handleValueTwo: 'HX000', handleValueFirstTitle: '运单号', handleValueFirst: 'FX34343', warningContentTitle: '预警内容', warningContent: '验封中', organIdTranslateTitle: '预警通知人', organIdTranslate: '张三' } ] } } } </script> ``` 斑马纹 >[info] 设置属性`stripe`为'true'。  带边框 >[info] 设置属性`border`为true。  特定样式 - `行`：通过属性`row-class-name`可以给某一行指定一个样式名称。 - `列`：通过给列 columns 设置字段`className`可以给某一列指定一个样式。 - `单元格`：通过给数据 data 设置字段`cellClassName`可以给任意一个单元格指定样式。 固定表头 >[info] 通过设置属性`height`给表格指定高度后，会自动固定表头。当纵向内容过多时可以使用。也可以设置`max-height`属性。 固定列 >[info] 通过给数据`columns`的项设置`fixed`为`left`或`right`，可以左右固定需要的列。当横向内容过多时可以使用。 固定表头和列 >[info] 同时应用上述两个属性，可以同时固定表头和列。 高亮行 >[info] 通过设置属性`highlight-row`，可以选中某一行。 - 当选择时，触发事件`@on-current-change`，可以自定义操作，事件返回两个值`currentRow`和`oldCurrentRow`，分别为当前行的数据和上一次选择的数据。 - 通过给`columns`数据设置一项，指定`type: 'index'`，可以自动显示一个从 1 开始的索引列。使用`indexMethod`可以自定义序号。 - 给 data 项设置特殊 key`_highlight: true`可以默认选中当前项。 - 调用`clearCurrentRow`方法可以手动清除选中项。 可选择 >[info] 通过给`columns`数据设置一项，指定`type: 'selection'`，即可自动开启多选功能。 - 给 data 项设置特殊 key`_checked: true`可以默认选中当前项。 - 给 data 项设置特殊 key`_disabled: true`可以禁止选择当前项。 - 正确使用好以下事件，可以达到需要的效果： `@on-select`，选中某一项触发，返回值为`selection`和`row`，分别为已选项和刚选择的项。 `@on-select-all`，点击全选时触发，返回值为`selection`，已选项。 `@on-selection-change`，只要选中项发生变化时就会触发，返回值为`selection`，已选项。  排序 >[info] 通过给`columns`数据的项，设置`sortable: true`，即可对该列数据进行排序。 - 排序默认使用升序和降序，也可以通过设置属性`sortMethod`指定一个自定义排序函数，接收三个参数 a 、 b 和 type。 - 通过给某一列设置`sortType`可以在初始化时使用排序。 - 如果使用远程排序，可以设置`sortable: 'custom'`，然后在触发排序事件`@on-sort-change`后，进行远程排序，并手动设置新的 data，详见 API。 - 注意，排序并不会影响到源数据 data。  ## API ### Table props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | theme | 表格风格，可选值`default`：默认表格、`col`：纵向表格、`row`：横向表格 | String | col | | data | 显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称，因此数据不能使用该字段。 | Array | \[\] | | columns | 表格列的配置描述，具体项见后文 | Array | \[\] | | stripe | 是否显示间隔斑马纹 | Boolean | false | | border | 是否显示纵向边框 | Boolean | false | | show-header | 是否显示表头 | Boolean | true | | width | 表格宽度，单位 px | Number | String | 自动 | | height | 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头 | Number | String | \- | | max-height | 表格最大高度，单位 px，设置后，如果表格内容大于此值，会固定表头 | Number | String | \- | | loading | 表格是否加载中 | Boolean | false | | disabled-hover | 禁用鼠标悬停时的高亮 | Boolean | false | | highlight-row | 是否支持高亮选中的行，即单选 | Boolean | false | | row-class-name | 行的 className 的回调方法，传入参数： `row`：当前行数据`index`：当前行的索引 | Function | \- | | size | 表格尺寸，可选值为`large`、`small`、`default`或者不填 | String | \- | | no-data-text | 数据为空时显示的提示内容 | String | 暂无数据 | | no-filtered-data-text | 筛选数据为空时显示的提示内容 | String | 暂无筛选结果 | | draggable | 是否开启拖拽调整行顺序，需配合 @on-drag-drop 事件使用 | Boolean | false | | tooltip-theme | 列使用 tooltip 时，配置它的主题，可选值为 dark 或 light | String | dark | | tooltip-max-width | 列使用 tooltip 时，配置 Tooltip 的最大宽，默认是 300 | Number | 300 | | row-key | 是否强制使用内置的 row-key，开启后可能会影响性能 | Boolean | String | false | | span-method | 合并行或列的计算方法 | Function | \- | | show-summary | 是否在表尾显示合计行 | Boolean | false | | sum-text | 合计行第一列的文本 | String | 合计 | | summary-method | 自定义的合计计算方法 | Function | \- | | indent-size | 树形数据缩进宽度，单位 px | Number | 16 | | load-data | 异步加载树形数据的方法 | Function | \- | | update-show-children | 展开树形数据时，是否需要更新`_showChildren`字段，使用异步树形数据时建议开启 | Boolean | false | | context-menu | 当前行点击右键是否会阻止默认行为 | Boolean | false | | show-context-menu | 点击右键弹出菜单，需配合 slot`contextMenu`一起使用 | Boolean | false | | fixed-shadow | 列固定时，阴影显示规则，可选值为`auto`、`show`、`hide` | String | show | ### 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-cell-click | 点击单元格时触发 | row, column, data, event | | on-expand | 展开或收起某一行时触发 | `row`：当前行的数据 `status`：当前的状态 | | on-drag-drop | 拖拽排序松开时触发，返回置换的两行数据索引 | index1, index2 | | on-column-width-resize | 拖拽调整列宽时触发 | newWidth, oldWidth, column, event | | on-contextmenu | 当前行点击右键时触发 | row, event, position | | on-expand-tree | 展开或收起子数据时触发 | row-key, status | ### Table slot | 名称 | 说明 | | --- | --- | | header | 表头 | | footer | 页脚 | | loading | 加载中 | | contextMenu | 右键菜单 | ### Table methods | 方法名 | 说明 | 参数 | | --- | --- | --- | | exportCsv | 将数据导出为`.csv`文件，说明：支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。 IE9、Safari 需要手动修改后缀名为`.csv`。 IE9暂时只支持英文，中文会显示为乱码。 | params(Object):` filename`文件名，默认为 table.csv;</br>`original`是否导出为原始数据，默认为 true;</br>`noHeader`不显示表头，默认为 false;</br>`columns`自定义导出的列数据;</br>`data`自定义导出的行数据;</br>`callback`添加此函数后，不会下载，而是返回数据;</br>`separator`数据分隔符，默认是逗号(,);</br>`quoted`每项数据是否加引号，默认为 false;</br>说明：columns 和 data 需同时声明，声明后将导出指定的数据，建议列数据有自定义render时，可以根据需求自定义导出内容 | | clearCurrentRow | 清除高亮项，仅在开启`highlight-row`时可用 | 无 | | selectAll | 全选/取消全选 | status | ### column 列描述数据对象，是 columns 中的一项 | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | type | 列类型，可选值为 index、selection、expand、html | String | \- | | title | 列头显示文字 | String | # | | key | 对应列内容的字段名 | String | \- | | width | 列宽 | Number | \- | | minWidth | 最小列宽 | Number | \- | | maxWidth | 最大列宽 | Number | \- | | align | 对齐方式，可选值为`left`左对齐、`right`右对齐和`center`居中对齐 | String | left | | className | 列的样式名称 | String | \- | | fixed | 列是否固定在左侧或者右侧，可选值为`left`左侧和`right`右侧 | String | \- | | ellipsis | 开启后，文本将不换行，超出部分显示为省略号 | Boolean | false | | tooltip | 开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容 | Boolean | false | | tooltipTheme | 配置 Tooltip 的主题，可选值为 dark 或 light | String | dark | | tooltipMaxWidth | 配置 Tooltip 的最大宽，默认是 300 | Number | 300 | | render | 自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引 | Function | \- | | renderHeader | 自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含`column`和`index`，分别为当前列数据和当前列索引。 | Function | \- | | indexMethod | type 为 index 时可用，自定义序号 | Function，参数 row 为当前行内容，index 为序号 | \- | | sortable | 对应列是否可以排序，如果设置为`custom`，则代表用户希望远程排序，需要监听 Table 的 on-sort-change 事件 | Boolean | 'custom' | false | | sortMethod | 自定义排序使用的方法，接收三个参数 a 、 b 和 type，当设置`sortable: true`时有效。type 值为 asc 和 desc | Function | \- | | sortType | 设置初始化排序。值为 asc 和 desc | String | \- | | filters | 过滤数据的选项，格式为数组，数组中每项包含`label`和`value`属性，使用过滤，必须同时配置 filterMethod | Array | \- | | filterMethod | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示 | Function | \- | | filterMultiple | 数据过滤的选项是否多选 | Boolean | true | | filteredValue | 在初始化时使用过滤，数组，值为需要过滤的 value 集合 | Array | \- | | filterRemote | 使用远程过滤 | Function | \- | | children | 表头分组 | Array | \- | | resizable | 该列是否允许拖拽调整宽度，需开启 border 属性，且设置 width | Boolean | false | | tree | 指定该列为显示展开/收起图标，树形数据时使用 | Boolean | \- | | display | 使用 slot 自定义列时，列的渲染模式。可选值为 block、inline、inline-block，当使用树形数据时，建议使用 inline 或 inline-block | String | \- |