# UTableView 数据表格 - [示例](#示例) - [基本用法](#基本用法) - [格式器](#格式器) - [列插槽](#列插槽) - [表格样式](#表格样式) - [表格状态](#表格状态) - [表头固定](#表头固定) - [表头吸顶](#表头吸顶) - [单行省略显示](#单行省略显示) - [表头文字省略显示](#表头文字省略显示) - [横向滚动](#横向滚动) - [固定列](#固定列) - [隐藏部分列](#隐藏部分列) - [缩放列宽](#缩放列宽) - [分页与加载更多](#分页与加载更多) - [排序](#排序) - [过滤（筛选）](#过滤筛选) - [特殊列](#特殊列) - [编辑行](#编辑行) - [编辑行-new](#编辑行-new) - [树型展示](#树型展示) - [表格行拖拽](#表格行拖拽) - [两个表格拖拽](#两个表格拖拽) - [导出 Excel](#导出-excel) - [常见问题](#常见问题) - [UTableView API](#utableview-api) - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [Methods](#methods) - [UTableViewColumn API](#utableviewcolumn-api) - [Props/Attrs](#propsattrs-2) - [Slots](#slots-2) - [UTableViewColumnConfig API](#utableviewcolumnconfig-api) - [Props/Attrs](#propsattrs-3) - [Slots](#slots-3) - [Events](#events-2) - [UTableViewColumnDynamic API](#utableviewcolumndynamic-api) - [Props/Attrs](#propsattrs-4) - [Slots](#slots-4) - [UTableViewColumnGroup API](#utableviewcolumngroup-api) - [Props/Attrs](#propsattrs-5) - [Slots](#slots-5) - [UTableViewExpander API](#utableviewexpander-api) - [Props/Attrs](#propsattrs-6) **Table** 用于展示大量结构化数据。支持排序、过滤（筛选）、分页、自定义操作等复杂功能。 ## 示例 基础示例中展示了如何初步地在表格视图组件中配置数据、修饰样式，以及如何处理数据过多的情况。 ### 基本用法 以列的视角对数据进行配置，`title`为列的标题，`field`是数据中作为唯一识别的字段名。 使用`width`设置列宽，支持数值和百分比两种格式。列宽的最终效果是这样的： - 先以配置了`width`的列为准，没有配置`width`的列会根据剩余宽度平均分配； - 如果所有列都配置了`width`，会产生横向滚动，不会进行宽度缩放。 使用`data-source`属性添加数据，有两种方式： #### data-source 数组 直接向`data-source`属性中传入`Array`格式的数组，每个`Item`为这样格式的对象`{ text: string, value: any, disabled: boolean, ... }`。 ``` html ``` #### data-source 函数 向`data-source`属性中传入一个加载函数，这种方式会自带 loading 加载、error 错误等效果，并且在下文中后端分页、过滤（筛选）等功能均需要采用这种传入数据的方式。 加载函数的格式是这样的 ``` ts (params) => Promise | { data: Array, total: number } | { data: Array, last: boolean }> ``` 组件会给加载函数提供过滤（筛选）、分页、加载更多等参数，要求返回一个如上的 Promise。 ``` vue ``` ### 格式器 如果列中的数据不是直接想展示的内容，可以对该列配置`formatter`属性对数据进行格式化处理，书写方式类似于 Vue 的 filter。 在下面的示例中，对最近登录时间字段做了格式化处理： ``` html ``` 也支持传入一个函数。在下面的示例中，对地址字段做了处理： ``` vue ``` ### 列插槽 如果对数据需要更加自定义的展示，可以使用列的`cell`插槽，定制想要的格式。 这个插槽为一个作用域插槽，会传入5个参数： - `item`为当前行的对象 - `value`是在`item`中根据`field`字段获取的值 ，即`item[this.field]` - `columnVM`为该列组件实例 - `rowIndex`为该行的索引 - `columnIndex`为该列的索引 最常用的是`item`和`value`两个字段。 在下面的示例中，把名称变成了链接： ``` html ``` ### 表格样式 #### 表格线条 设置`line`，可以给单元格上下左右都加上边框。 ``` html ``` #### 条纹展示 使用`striped`属性给表格行添加间隔条纹。 ``` html ``` #### 表格颜色 设置`color="light"`，可以将表格改为浅色风格。 ``` html ``` #### 单行颜色 使用`rowColor`字段，可以单独给某一行添加颜色。 ``` html ``` #### 隐藏头部 将`show-head`属性设置为`false`，可以隐藏头部。 ``` html ``` ### 表格状态 表格除了加载完成的正常列表状态，还有其它几种状态，可以通过属性或插槽设置。 > 控制表格状态是给`data-source`为数组的情况提供，如果`data-source`为函数，不需要自行设置。 #### 加载中 当`data-source`没传，或设置`loading`属性为`true`时，显示为加载中的状态。 ``` html ``` 可以通过`loading-text`或 loading 插槽自定义加载中信息。 ``` html ``` #### 加载错误 当`data-source`为`null`，或设置`error`属性为`true`时，显示为加载错误的状态。 ``` html ``` 可以通过`error-text`或 error 插槽自定义加载错误信息。 ``` html ``` #### 没有数据 当`data-source`为空数组时，显示为没有数据的状态。 ``` html ``` ### 表头固定 通过给``的样式设置`height`或`max-height`属性，可以限制表格高度。在数据较多的情况下，会自动固定表头。 ``` html ``` ### 表头吸顶 通过设置`stick-head`属性，可以开启表头吸顶功能。通过设置`stick-head-offset`可以调节距离父级滚动元素的偏移位置。 ``` html ``` #### 默认多行显示 某些情况下，我们会遇到文字过长的问题，默认会进行多行显示。 ``` html ``` ### 单行省略显示 可以对整个表格设置`ellipsis`属性，或单独对列设置`ellipsis`属性，使文本单行省略，鼠标悬浮时会有工具提示。 ``` html ``` ### 表头文字省略显示 可以对整个表格设置`thEllipsis`属性，或单独对列设置`thEllipsis`属性，使表头文本单行省略，鼠标悬浮时会有工具提示。 ``` html ``` ### 横向滚动 有时省略文字并不直观，可以考虑对所有列设置较长的宽度。产生横向滚动。 ``` html ``` ### 固定列 也可以对左右边缘重要的列进行固定 ``` html ``` ### 隐藏部分列 ``` vue ``` ### 缩放列宽 开启`resizable`属性，可以调整列宽。 根据`resize-remaining`属性，调整列宽有三种效果。`average`表示保持总宽不变，后面所有列平均弥补宽度；`sequence`表示保持总宽不变，优先后一列弥补宽度；`none`表示不做任何处理，表格宽度变化。 #### average ``` html ``` #### sequence ``` html ``` #### none ``` html ``` ### 分页与加载更多 #### 前端分页 如果数据源本身为前端数据或是从后端一次性拿过来的，设置`pageable`或`pageable="pagination"`即可开启分页功能，用`page-size`属性修改分页大小。 ``` vue ``` #### 后端分页 如果需要通过后端接口进行分页或加载更多，在开启`pageable`属性的基础上，还要开启`remote-paging`属性。 需要用最前面提到的 data-source 函数的方式传入数据。 加载函数的格式是这样的： ``` ts ({ paging: { size: number, // 每页大小 number: number, // 页数。从1开始计 offset: number, // 偏移量：(number - 1) * size limit: number, // 同 size } }) => Promise<{ data: Array, // 当前页数据 total: number, // 数据总量 }> ``` 组件会给加载函数提供分页器或加载位置的参数，要求返回如上的一个 Promise。Promise 的结果中需要有 total 字段，用于计算页面总数。 可以看下面的示例，在数据栏中`result`为最新一次模拟请求的返回数据。 ``` vue ``` #### 翻页器功能 使用`show-total`、`show-sizer`、`show-jumper`这几个属性，可以对应开启翻译器的显示总页数、切换每页大小、页面跳转功能。 ``` vue ``` #### 滚动加载更多 通过设置`pageable="auto-more"`，可以用滚动加载更多代替翻页器。 data-source 加载函数的格式是这样的： ``` ts ({ paging: { size: number, // 每页大小 number: number, // 页数。从1开始计 offset: number, // 偏移量：(number - 1) * size limit: number, // 同 size } }) => Promise | { data: Array, total: number } | { data: Array, last: boolean }> ``` 组件会给加载函数提供加载位置的参数，要求返回如上的一个 Promise。翻页是否到底，如果 Promise 的结果为： - `{ data: Array, total: number }`，根据 total 数值判断是否翻到最底部 - `{ data: Array, last: boolean }`，根据 last 布尔值判断是否为最后一次 - `Array`，则根据数组为空判断为最后一次 可以看下面的示例，在数据栏中`result`为最新一次模拟请求的返回数据。 ``` vue ``` #### 手动加载更多 通过设置`pageable="load-more"`，可以用加载更多按钮代替翻页器。 ``` vue ``` ### 排序 #### 前端排序 如果数据源本身为前端数据或是从后端一次性拿过来的，在设置以下属性后，会开启前端排序功能。 在``上给可以排序的列添加`sortable`属性。 在``用`sorting`属性指定初始的排序字段和顺序，该属性可以使用`.sync`。 ``` vue ``` #### 后端排序 如果需要后端接口进行排序，在开启某些列的`sortable`属性的基础上，还要开启`remote-sorting`属性。 data-source 加载函数的格式是这样的： ``` ts ({ sorting: { field: string, // 排序字段 order: 'asc' | 'desc', // 升序还是降序 } }) => Promise | { data: Array, total: number } | { data: Array, last: boolean }> ``` 组件会给加载函数提供排序参数，要求返回如上的一个 Promise。 ``` vue ``` ### 过滤（筛选） #### 前端过滤（筛选） 如果数据源本身为前端数据或是从后端一次性拿过来的，在设置以下属性后，会开启前端过滤功能。 在``上通过`filters`属性，给需要过滤的列添加选项。 在``用`filtering`属性指定初始的过滤字段，该属性可以使用`.sync`。 ``` vue ``` #### 前端过滤（筛选）- 筛选项可多选 用`filterMultiple`属性指定筛选项是否可多选。可在``或者``上设置 用`filterMax`属性指定筛选项最多可选个数。可在``或者``上设置 ``` vue ``` #### 后端过滤（筛选） 如果需要通过后端接口进行过滤，在某些列设置了`filters`选项的基础上，还要开启`remote-filtering`属性。 ``` ts ({ filtering: { [field: string]: any, // 过滤（筛选）字段 } }) => Promise | { data: Array, total: number } | { data: Array, last: boolean }> ``` 组件会给加载函数提供过滤参数，要求返回如上的一个 Promise。 ``` vue ``` #### 后端过滤（筛选）- 筛选项可多选 用`filterMultiple`属性指定筛选项是否可多选。可在``或者``上设置 用`filterMax`属性指定筛选项最多可选个数。可在``或者``上设置 ``` vue ``` ### 特殊列 UTableView 中内置了一些特殊的列，通过设置`type`来开启。 #### 序号列 添加一个`type="index"`的``，这个列中会显示每行的序号。设置`start-index`可以改变初始值，默认为`1`。 > 注意：这种方式只能显示当前页的序号，如果复杂的序号请使用列插槽自定义。 ``` html ``` #### 单选列 开启`selectable`属性，可以选择行。 ``` html ``` 也可以添加一个`type="radio"`的``，这个列中会显示单项选择框，专门用于单选操作。 通过`value-field`属性指定数据中唯一值的字段，然后`v-model`或`:value.sync`对选择值进行双向绑定。 ``` vue ``` #### 多选列 添加一个`type="checkbox"`的``，这个列中会显示多项选择框，用于多选操作。 控制多选有两种方式，一种是设置数据对应行的`checked`属性，该属性会与多项选择框进行双向绑定。`disabled`属性可以禁用多项选择框。 ``` vue ``` 另一种是通过`value-field`属性指定数据中唯一值的字段，再通过`:values.sync`对选择值进行双向绑定。 ``` vue ``` #### 展开列 ``` vue ``` 也可以放到列尾。 ``` vue ``` 使用`accordion`属性开启手风琴模式，在展开一项的同时会收起其他项。 ``` vue ``` #### 特殊列与普通功能共用 使用`type`设置的特殊列可以与普通的`field`共用。 ``` vue ``` ### 编辑行 下面是一个在表格中增删改查数据的综合示例。 ``` vue ``` ### 编辑行-new 下面是一个在表格中增删改查数据的综合示例。 ``` vue ``` ### 树型展示 同步数据。 ``` vue ``` 异步加载数据，指定`treeDataSource`。 ``` vue ``` ### 表格行拖拽 普通表格 ``` html ``` 树型表格 ``` vue ``` 树型表格-虚拟列表 ``` vue ``` 树型表格-设置不可拖拽节点、不可放入节点 ``` vue ``` ### 两个表格拖拽 表格内部&表格间可拖拽 ``` vue ``` 表格间可拖拽 ``` vue ``` 树型表格间拖拽 ``` vue ``` ### 导出 Excel 要使用 exportExcel 方法, 需要向`data-source`属性中可传入加载函数，也可传入数组。传递给 exportExcel 的参数最终会传递给加载函数 ``` vue ``` ## 常见问题 暂无 ## UTableView API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | data-source | Array\ \| Function \| object \| DataSource | | | 展示数据的输入源，可设置为数据集对象或者返回数据集的逻辑 | | data-schema | schema | | | 数据源返回的数据结构的类型，自动识别类型进行展示说明 | | extra-params | object | | | 数据源除了DataSourceParams外还需要的参数 | | pageable | boolean | | `false` | | | remote-paging | boolean | | `false` | | | pagination | boolean | | | 设置是否分页展示数据 | | page-size | number | | `20` | | | show-sizer | boolean | | `true` | 显示每页条数切换器 | | page-size-options | Array\ | | `[10, 20, 50]` | 每页条数切换器的选项 | | page-number | number | | `1` | 当前默认展示在第几页 | | show-total | boolean | | `false` | | | show-jumper | boolean | | `false` | 显示页面跳转输入框 | | sorting | { field: string, order: string, compare: Function } | | `'{ field: undefined, order: 'desc' }'` | 设置数据初始化时的排序字段和顺序规则 | | remote-sorting | boolean | | `false` | | | default-order | string | `[object Object]`
`[object Object]` | `'asc'` | | | filtering.sync | object | | | | | remote-filtering | boolean | | `false` | 是否使用后端筛选 | | value-field | string | | | 在单选、多选操作、渲染树形数据中，指定数据唯一值的字段 | | value.sync, v-model | any | | | 用于标识单选选项的值 | | values.sync | Array | | | 用于标识多选选项的值 | | tree-display | boolean | | `false` | 以树形数据展示表格 | | parent-field | string | | | 当数据源为平铺数据时自动生成树形数据的节点字段名，重要：值字段名需要一起配置 | | children-field | string | | `'children'` | 树形数据子节点字段名，默认为children | | has-children-field | string | | `'hasChildren'` | 该字段指定行数据是否包含子节点数据，默认为hasChildren | | tree-check-type | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'up+down'` | 父子树节点是否关联选中 | | title | string | | | | | show-head | boolean | | `true` | | | stick-head | boolean | | `false` | | | stick-head-offset | number | | `0` | | | hover | boolean | | `false` | 表格行在悬浮时是否高亮显示 | | selectable | boolean | | `false` | 设置是否可以单选行 | | cancelable | boolean | | `false` | 设置是否可以取消选择 | | draggable | boolean | | `false` | 设置是否可以拖拽行排序 | | acrossTableDrag | boolean | | `false` | 设置多个表格间是否可以拖拽放置 | | can-dragable-handler | Function | | | 设置表格行是否可拖拽起来。绑定逻辑 | | can-dropin-handler | Function | | | 设置表格行是否可拖拽放入。绑定逻辑 | | accordion | boolean | | `false` | 设置是否每次只展开一个 | | resizable | boolean | | `false` | 设置是否可以调整列宽 | | resize-remaining | string | `[object Object]`
`[object Object]`
`[object Object]` | `'average'` | 设置调整列宽时如何处理剩余大小 | | configurable | boolean | | `false` | 设置是否可以配置展示列 | | virtual | boolean | | `false` | 虚拟滚动表示不展示所有的数据，只展示默认条数的数据，当滚动时再展示剩余的数据。当表格数据量大时，可设置为虚拟滚动，提高性能。默认关闭。 | | item-height | number | | | 与虚拟滚动配合使用，表示每一行的高度。请确保行里的数据不要换行 | | virtual-count | number | | `60` | 与虚拟滚动配合使用，表示每屏展示的最大条数 | | initial-load | boolean | | `true` | 设置初始时是否立即加载 | | designer-mode | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'success'` | 设置不同加载状态的展示内容 | | loading-text | string | | `'正在加载中...'` | 加载中状态显示的提示文案 | | loading | boolean | | | 加载中状态的触发条件，未设置则默认为系统定义条件 | | error-text | string | | `'加载失败，请重试'` | 加载失败状态显示的提示文案 | | error | boolean | | | 加载失败状态的触发条件，未设置则默认为系统定义条件 | | empty-text | string | | `'暂无数据'` | 暂无数据状态显示的提示文案 | | readonly | boolean | | `false` | 正常显示，但禁止选择/输入 | | disabled | boolean | | `false` | 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） | | title-alignment | string | `[object Object]`
`[object Object]`
`[object Object]` | `'center'` | | | boldHeader | boolean | | `true` | | | border | boolean | | `false` | | | line | boolean | | `false` | 单元格之间是否显示分隔线条 | | striped | boolean | | `false` | 表格行是否按斑马线条纹显示 | | default-column-width | string \| number | | | 表格的默认列宽度，可设置为数字或百分比 | ### Slots #### (default) 在表格中插入``子组件 #### loading 自定义加载中内容 #### error 自定义加载错误内容 #### empty 自定义暂无数据内容 #### dragGhost 自定义拖拽缩略图 ### Events #### @before-load 加载前触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.preventDefault | Function | 阻止加载流程 | | senderVM | UTableView | 发送事件实例 | #### @load 加载后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | null | 无 | | senderVM | UTableView | 发送事件实例 | #### @before-page 切换分页前触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.size | number | 分页大小 | | $event.oldSize | number | 旧的分页大小 | | $event.number | number | 当前页数 | | $event.oldNumber | number | 旧的页数 | | $event.preventDefault | Function | 阻止切换分页流程 | | senderVM | UTableView | 发送事件实例 | #### @page 切换分页或改变分页大小时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.size | number | 分页大小 | | $event.oldSize | number | 分页大小 | | $event.number | number | 当前页数 | | $event.oldNumber | number | 旧的页数 | | senderVM | UTableView | 发送事件实例 | #### @before-sort 排序前触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.field | string | 排序字段 | | $event.order | string | 排序顺序 | | $event.compare | Function | 排序比较函数 | | $event.preventDefault | Function | 阻止排序流程 | | senderVM | UTableView | 发送事件实例 | #### @sort 排序后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.field | string | 排序顺序 | | $event.order | string | 排序字段 | | $event.compare | Function | 排序比较函数 | | senderVM | UTableView | 发送事件实例 | #### @before-filter 筛选前触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 筛选参数对象 | | $event.preventDefault | Function | 阻止筛选流程 | | senderVM | UTableView | 发送事件实例 | #### @filter 筛选后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 筛选参数对象 | | senderVM | UTableView | 发送事件实例 | #### @click-row 点击某一行时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.item | object | 点击行相关对象 | | $event.index | number | 点击行索引 | #### @dblclick-row 双击某一行时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.item | object | 双击行相关对象 | | $event.index | number | 双击行索引 | #### @before-select 选择某一项前触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 选择行的值 | | $event.oldValue | any | 旧的值 | | $event.item | object | 选择行相关对象 | | $event.oldItem | object | 旧的选择行相关对象 | | $event.preventDefault | Function | 阻止选择流程 | | senderVM | UTableView | 发送事件实例 | #### @input 选择某一项后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | any | 选择行的值 | | senderVM | UTableView | 发送事件实例 | #### @select 选择某一项后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 改变后的值 | | $event.oldValue | any | 旧的值 | | $event.item | object | 选择行相关对象 | | $event.oldItem | object | 旧的选择行相关对象 | | $event.selectedItem | object | 最终选择行的对象。在`cancelable`的情况下，与`$event.item`不同。 | | senderVM | UTableView | 发送事件实例 | #### @check 多选模式中，选中节点后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.checked | boolean | 选中状态 | | $event.values | Array | 选择后的值 | | $event.oldValues | Array | 旧的值 | | $event.item | object | 选择行相关对象 | | $event.items | object | 所有选择行相关对象 | | senderVM | UTableView | 发送事件实例 | #### @change 单选或多选值改变后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 选择行的值 | | $event.oldValue | any | 旧的值 | | $event.item | object | 选择行相关对象 | | $event.items | object | 所有选择行相关对象 | | $event.oldItem | object | 旧的选择行相关对象 | | senderVM | UTableView | 发送事件实例 | #### @resize 调整列宽后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event.columnVM | UTableColumnVM | 调整的列实例 | | $event.index | number | 列索引 | | width | number | 调整后的宽度 | | oldWidth | number | 调整前的宽度 | #### @before-toggle-expanded 点击展开按钮前触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.item | object | 选择行相关对象 | | $event.expanded | boolean | 展开状态值 | | $event.oldExpanded | boolean | 展开前状态值 | #### @toggle-expanded 点击展开按钮后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.item | object | 选择行相关对象 | | $event.expanded | boolean | 展开状态值 | #### @dragstart 拖拽行时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 被拖拽行相关对象 | | $event.source | object | 被拖拽行相关对象 | #### @dragover 拖拽经过每一行时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 拖拽经过的行相关对象 | | $event.target | object | 拖拽经过的行相关对象 | #### @drop 拖拽结束时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 拖拽放置的相关对象 | | $event.source | object | 被拖拽行相关对象 | | $event.target | object | 拖拽放置行相关对象 | | $event.position | number | 拖拽放置的位置 | | $event.finalSource | object | 被拖拽行相关对象 | | $event.updateData | object | 需要更新的数据 | Methods #### reload() 清除缓存，重新加载 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### getFields() 获取所有表格列的 field | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### exportExcel(page, size, filename, sort, order, excludeColumns, includeStyles) 导出 excel 文件 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | | page | number | `1` | 当前页码 | | size | number | `2000` | 每页条数 | | filename | string | `'tableView.params.filename'` | 导出文件名 | | sort | string | `'tableView.params.sort'` | 排序字段 | | order | string | `'tableView.params.order'` | 排序顺序，'asc' 或 'desc' | | excludeColumns | Array\ | `[]` | 排除字段 | | includeStyles | boolean | `false` | 是否带样式 | #### resetEdit(item) 重制编辑列的编辑状态为非编辑态 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | | item | object | | 行数据 | ## UTableViewColumn API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | formatter | string \| object \| Function \| Formatter | | `'placeholder'` | 格式器 | | filters | Array\<{ text: string, value: any }\> | | | 筛选项的参数 | | field | string | | | data 项中的字段 | | sortable | boolean | | `false` | 设置该列是否可以排序 | | default-order | string | `[object Object]`
`[object Object]` | `'asc'` | 该列首次点击时的排序顺序 | | type | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 支持序号列、单/多选、树形列和编辑列切换，序号列支持按照数字排序。选择编辑列需要先设置列字段。 | | auto-index | boolean | | `false` | 换页后，继续上一页的列序号进行编号 | | start-index | number | | `1` | 序号列的起始序号 | | dblclickHandler | Function | | | 用于可编辑表格，双击表格列时的处理函数 | | title | string | | | | | fixed | boolean | | `false` | 该列是否固定。左侧固定列需要从第一列到当前固定列之间的列都是固定列。右侧固定列需要最后一列到当前固定列之间的列都是固定列。 | | ellipsis | boolean | | `false` | 文字过长是否省略显示。默认文字超出时会换行。 | | hidden | boolean | | `false` | | | expander-position | string | `[object Object]`
`[object Object]` | `'left'` | 展开列图标的位置 | | width | string \| number | | | 设置列宽度，可设置为数字或百分比 | | colSpan | number | | | undefined | | autoRowSpan | boolean | | `false` | undefined | ### Slots #### cell 对单元格的数据展示进行自定义 | Prop | Type | Description | | ---- | ---- | ----------- | | item | object | 循环中的当前项 | | value | any | item 中 field 字段对应的值 | | columnVM | string | 该列组件实例 | | rowIndex | number | 行的索引 | | columnIndex | number | 列的索引 | #### editcell 对单元格的编辑数据展示进行自定义 | Prop | Type | Description | | ---- | ---- | ----------- | | item | object | 循环中的当前项 | | value | any | item 中 field 字段对应的值 | | columnVM | string | 该列组件实例 | | rowIndex | number | 行的索引 | | columnIndex | number | 列的索引 | #### title 对标题进行自定义 | Prop | Type | Description | | ---- | ---- | ----------- | | columnVM | string | 该列组件实例 | | columnIndex | number | 列的索引 | #### expand-content 展开列的内容 | Prop | Type | Description | | ---- | ---- | ----------- | | item | object | 循环中的当前项 | | value | any | item 中 field 字段对应的值 | | columnVM | string | 展开列组件实例 | | rowIndex | number | 行的索引 | | columnIndex | number | 展开列的索引 | #### expander 展开列图标 | Prop | Type | Description | | ---- | ---- | ----------- | | item | object | 循环中的当前项 | | value | any | item 中 field 字段对应的值 | | columnVM | string | 该列组件实例 | | rowIndex | number | 行的索引 | | columnIndex | number | 列的索引 | ## UTableViewColumnConfig API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | text-field | string | | | 配置列的下拉弹窗里，指定数据展示的字段 | | data-source | Array\ \| Function \| object \| DataSource | | | 展示数据的输入源，可设置为数据集对象或者返回数据集的逻辑 | | data-schema | schema | | | 数据源返回的数据结构的类型，自动识别类型进行展示说明 | | value-field | string | | `'value'` | 在单选、多选操作、渲染树形数据中，指定数据唯一值的字段 | | value.sync, v-model | any | | | | | show-footer | boolean | | `true` | 控制弹出层的确定/取消按钮是否展示 | ### Slots #### title #### item 自定义选项的结构和样式 ### Events #### @select | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 改变后的值 | | $event.oldValue | any | 旧的值 | | $event.item | object | 选择项相关对象 | | $event.oldItem | object | 旧的选择项相关对象 | | $event.itemVM | USelectItem | 选择项子组件 | | $event.oldVM | USelectItem | 旧的选择项子组件 | | senderVM | USelect | 发送事件实例 | ## UTableViewColumnDynamic API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | data-source | Array\ \| Function \| object \| DataSource | | | 展示数据的输入源，可设置为数据集对象或者返回数据集的逻辑 | | data-schema | schema | | | 数据源返回的数据结构的类型，自动识别类型进行展示说明 | | value-field | string | | `'value'` | 在单选、多选操作、渲染树形数据中，指定数据唯一值的字段 | | sortable | boolean | | `false` | 设置该列是否可以排序 | | default-order | string | `[object Object]`
`[object Object]` | `'asc'` | 该列首次点击时的排序顺序 | | fixed | boolean | | `false` | 该列是否固定。左侧固定列需要从第一列到当前固定列之间的列都是固定列。右侧固定列需要最后一列到当前固定列之间的列都是固定列。 | | ellipsis | boolean | | `false` | 文字过长是否省略显示。默认文字超出时会换行。 | | hidden | boolean | | `false` | | | width | string \| number | | | 设置列宽度，可设置为数字或百分比 | ### Slots #### title #### cell 自定义选项的结构和样式 ## UTableViewColumnGroup API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | title | string | | | | | fixed | boolean | | `false` | 该分组列是否固定。该分组列固定后，分组下的所有列都会固定 | ### Slots #### (default) 在表格中插入``子组件 #### title 对标题进行自定义 | Prop | Type | Description | | ---- | ---- | ----------- | | columnVM | string | 该列组件实例 | | columnIndex | number | 列的索引 | ## UTableViewExpander API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | expand-icon | icon | | | 展开时图标 | | collapse-icon | icon | | | 关闭时图标 |