ZQ/laws-sinotruk-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 补充JTable说明文档

Browse Source
This commit is contained in:
赵霄
2023-08-23 16:57:43 +08:00
parent 74b93d692b
commit 083bcaf0a2
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/jero/README_JTable.md
+21 -17
View File
@@ -1,25 +1,28 @@
# JTable 支持列自定义及可拖拽列宽的表格 # JTable 支持列自定义及可拖拽列宽的表格
## JTable参数配置 ## JTable参数配置
| 参数 | 类型 | 必填 | 说明 | | 参数 | 类型 | 必填 | 说明 |
|--------------|--------|-----|----------------------------------------------------------------| |--------------|--------|----|---------------------------------------------------------------|
| tableKey | String | ✔ | 全局`JTable`唯一，持久化存储自定义列配置 | | tableKey | String | | 全局`JTable`唯一，持久化存储自定义列配置 |
| columns | Array | ✔ | **需要配合`.sync`获取最新的数据**，具体项见下表 | | columns | Array | ✔ | **需要配合`.sync`获取最新的数据**，具体项见下表 |
| settingStyle | Object | | 自定义列配置表的样式 | | settingStyle | Object | | 自定义列配置表的样式 |
| settingScroll | Object | | 自定义列配置表的滚动配置 | | settingScroll | Object | | 自定义列配置表的滚动配置 |
| scroll | Object | | 表格滚动配置，建议使用拖拽属性`resizable`时设置`scroll.x`，**需要配合`.sync`获取最新的数据** | | scroll | Object | | 表格滚动配置，建议使用拖拽属性`resizable`时设置`scroll.x`，**需要配合`.sync`获取最新的数据** |
| columnMinWidth | Number | | 所有列共用的最小宽度，在没有`width`和`minWidth`时的冻结列和拖拽列的最小宽度 | | columnMinWidth | Number | | 所有列共用的最小宽度，在没有`width`和`minWidth`时的冻结列和拖拽列的最小宽度 |
| needSettingColumnHideOrFreeze | Boolean | | 是否需要设置冻结列和显隐列 |
| needSaveSettingInLocal | Boolean | | 是否需要将冻结和显隐的设置存储在localStorage中 |
| canDrag | Boolean | | 是否可拖拽 |
## columns参数配置 ## columns参数配置
| 参数 | 类型 | 必填 | 说明 | | 参数 | 类型 | 必填 | 说明 |
|-------------------|----------------|----|--------------------------------| |-------------------|----------------|----|------------------------------------------------------|
| hideSettingColumn | Boolean | | 是否在自定义列配置表中隐藏 | | hideSettingColumn | Boolean | | 是否在自定义列配置表中隐藏 |
| disabledHide | Boolean | | 是否禁用自定义列配置表中的隐藏复选框 | | disabledHide | Boolean | | 是否禁用自定义列配置表中的隐藏复选框 |
| disabledFreeze | Boolean | | 是否禁用自定义列配置表中的冻结复选框 | | disabledFreeze | Boolean | | 是否禁用自定义列配置表中的冻结复选框 |
| fixed | String、Boolean | | 默认的冻结列，只能为`true`或`'left'`其他不生效 | | fixed | String、Boolean | | 默认的冻结列，只能为`true`或`'left'`其他不生效 |
| width | Number | | 列宽，只能是数字 | | width | Number | | 列宽，只能是数字 |
| minWidth | Number | | 最小列宽，只能是数字，在冻结列和拖拽列时生效 | | minWidth | Number | | 最小列宽，只能是数字，在冻结列和拖拽列时生效 |
| resizable | Boolean | | 是否启用拖拽，需要表格显示边框`bordered` | | resizable | Boolean | | 是否启用拖拽，需要表格显示边框`bordered`（这个属性因为加了总体的参数canDrag，暂时无效） |
## JTable的方法 ## JTable的方法
@@ -90,6 +93,7 @@
- `table-key`该属性为全局每个表的唯一属性，建议使用路由+命名的方式，如[示例](#示例)中设置 - `table-key`该属性为全局每个表的唯一属性，建议使用路由+命名的方式，如[示例](#示例)中设置
- 固定头和列（ant-design-vue自带的问题） ：若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。 - 固定头和列（ant-design-vue自带的问题） ：若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。
建议指定 scroll.x 为大于表格宽度的固定值。注意，且非固定列宽度之和不要超过 `scroll.x`。 建议指定 scroll.x 为大于表格宽度的固定值。注意，且非固定列宽度之和不要超过 `scroll.x`。
- 如果表头是从后端获取的，需要写v-if="columns && columns.length > 0"，引入ConfigurableTableMixin混入
## 示例 ## 示例