基础示例中展示了如何初步地在表格视图组件中配置数据、修饰样式，以及如何处理数据过多的情况。 ### 基本用法以列的视角对数据进行配置，`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 ```