### 分页 #### 纯数组前端分页 ``` vue ``` #### 刚开始为空的情况 ``` vue ``` ### 排序 #### 纯数组前端排序 ``` vue ``` #### 后端排序，前端分页 ``` vue ``` ### 过滤 #### 纯前端过滤 ``` vue ``` #### 后端过滤，前端分页 ``` vue ``` ### 表头吸顶 ``` html

``` ``` html

``` ### 文字过长问题 #### 默认多行显示 ``` html

``` #### 省略显示 ``` html

``` #### 表头文字省略展示 ``` html

``` ### 列分布 #### 全部百分比 ``` html

``` #### 百分比与数字结合，横向滚动 ``` html

``` #### 固定列 ``` html

``` ### 多选的问题另一种是通过`value-field`属性指定数据中唯一值的字段，再通过`:values.sync`对选择值进行双向绑定。 ``` vue ``` ### 局部报错局部报错不应该让整个表格都挂掉。 ``` vue ``` ### value-field value-field 需要编辑时，建议使用另一个字段。 ``` vue ``` ### 数据后来加载过来时，高度应当重新计算 ``` vue ``` #### data-source Error 的情况 ``` vue ``` ### 步骤条中使用 ``` vue ``` ### 排序+调整列宽 ``` vue ``` ### 切换时分页调整不回来，分页报错 ``` vue ``` #### 过滤下拉菜单不应该嵌在表格内部 ``` vue ``` ### 空表格显示数据异常 ``` vue ``` ### 空表格添加数据不会 reload ``` vue ``` #### u-grid-layout 和 u-tabs 中的布局问题 ``` vue ``` ### loading 的问题 ``` vue ``` #### 前端排序不需要 sorting 也能保持状态 ``` vue ``` #### 后端排序如果需要后端接口进行排序，在开启某些列的`sortable`属性的基础上，还要开启`remote-sorting`属性。 data-source 加载函数的格式是这样的： ``` ts ({ sorting: { field: string, // 排序字段 order: 'asc' | 'desc', // 升序还是降序 } }) => Promise | { data: Array, total: number } | { data: Array, last: boolean }> ``` 组件会给加载函数提供排序参数，要求返回如上的一个 Promise。 ``` vue ``` ### 控制显隐目前使用 ResizeObserver 后，`v-if`和`v-show`均可。 #### v-if ``` vue ``` #### v-show ``` vue ``` ### 树型展示，点击选中 ``` vue ``` ### 树型展示同步数据。 ``` vue ``` ### 显隐列配置 ``` vue ``` ### 编辑行添加新行时，select数据load情况 ``` vue ``` ### 动态列 ``` vue ``` ### 动态列排序和拖拽 ``` vue ``` ### 行列与表头合并 ``` vue ``` ### 行列与表头合并+固定列 ``` vue ``` ### 自定义展开列图标 ``` vue ``` ### 虚拟列表 ``` vue ``` ### 导出 Excel 样式设置要使用 exportExcel 方法, 需要向`data-source`属性中可传入加载函数，也可传入数组。传递给 exportExcel 的参数最终会传递给加载函数 ``` vue ``` ### new Datasource #### 纯数组前端分页 ``` vue ``` #### 纯前端分页数据源改变后分页情况 ``` vue ``` ##### 后端分页 ``` vue ``` #### 排序 ##### 纯数组前端排序 ``` vue ``` #### 过滤 ##### 纯前端过滤 ``` vue ``` ### 表格有border ``` vue ``` ### tab切换虚拟滚动状态重置 ``` vue ```