diff --git a/docs/component/uniui/uni-table.md b/docs/component/uniui/uni-table.md index d46a8c24e7c715723bd620a0ed7adf848e9bf5ff..2e185ae06cd1e916a8ec12cc51e1a5ccb5fdd134 100644 --- a/docs/component/uniui/uni-table.md +++ b/docs/component/uniui/uni-table.md @@ -1,144 +1,145 @@ - -::: tip 组件名:uni-table -> 代码块: `uTable` - -[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-table) -::: - -用于展示多条结构类似的数据 - -## 介绍 -### 基本用法 -表格是由4个组件: `uni-table`表格组件、`uni-tr`表格行 、`uni-th` 表格头、`uni-td` 单元格组成 - -需要注意的是: -- `uni-table` 的根节点一定是 `uni-tr` -- `uni-tr` 的根节点一定是 `uni-th` 或者 `uni-td` -- 一个表格内理论上只能包含表头行 -- 目前只能在 `uni-th` 中设置 width 属性,`uni-td` 的宽度跟随 `uni-th` 宽度变化 - - -```html - - - - 日期 - 姓名 - 地址 - - - - 2020-10-20 - Jeson - 北京市海淀区 - - - 2020-10-21 - HanMeiMei - 北京市海淀区 - - - 2020-10-22 - LiLei - 北京市海淀区 - - - 2020-10-23 - Danner - 北京市海淀区 - - - - - -``` - - - - -## API - -### Table Props - -|属性名| 类型|默认值| 可选值| 说明| -|:-:| :-:|:-:| :-:| :-: | -|border| Boolean| false| -| 是否带有纵向边框 | -|stripe| Boolean| true| -| 是否显示斑马线样式 | -|type| String| ''| -| 值为type="selection" 时开启多选| -|emptyText | String| 没有更多数据| -| 空数据时显示的文本内容| -|loading| Boolean| false| -| 显示加载中| - -### Table Events - -|事件称名|说明| 返回参数 | -|:-:|:-:| :-: | -|selection-change| 开启多选时,当选择项发生变化时会触发该事件 | Function(Object)| - -### Table Methods -**Tips: 因微信小程序框架问题,暂不支持如下方法** - -|方法称名|说明|参数| -|:-:|:-:|:-:| -|selectionAll|选中全部行 |- | -|toggleRowSelection |用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) | Function(Array:[行索引],Boolean:selected) | -|clearSelection |用于多选表格,清空用户的选择 |- | -|toggleAllSelection |用于多选表格,切换所有行的选中状态 |- | - - - -### Th Props - -|属性名|类型|默认值|可选值|说明| -|:-:|:-: |:-:| :-:|:-:| -|width|String | -|-| 单元格宽度| -|align|String | left|left/center/right| 表头对齐方式| -|filter-type|String ||search/select/range/date | 筛选类型,search关键字搜索,select类别选择| -|filter-data|Array ||| 筛选数据| -|sortable |Boolean| false|- | 是否启用排序| - -**filter-data 示例** -```json -[{ - text: "", //显示 - value: "" // 值 -}] -``` - - -### Th Events - -|事件称名 |说明 | 返回参数 | -|:-: |:-: | :-: | -||sort-change | 点击排序时会触发该事件 | Function(Object)| -||filter-change | 筛选数据时会触发该事件 | Function(Object)| - -filter-change(e) 说明 -```json -e = { - filterType: "", //筛选类型 search/select/range 和传入的相同 - filter: "" // 值, filterType=search字符串类型,filterType=select数组类型,filterType=range数组类型,[0]开始值, [1]结束值 -} -``` - - -### Td Props - -|属性名 |类型 |默认值 |可选值 |说明| -|:-: |:-: |:-: |:-: |:-:| -|align |String | left |left/center/right | 单元格对齐方式| - - - -## 示例 -::: warning 注意 -示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。 - -请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-table) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。 -::: - -::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/table/table -> Template -``` html + +::: tip 组件名:uni-table +> 代码块: `uTable` + +[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-table) +::: + +用于展示多条结构类似的数据 + +## 介绍 +### 基本用法 +表格是由4个组件: `uni-table`表格组件、`uni-tr`表格行 、`uni-th` 表格头、`uni-td` 单元格组成 + +需要注意的是: +- `uni-table` 的根节点一定是 `uni-tr` +- `uni-tr` 的根节点一定是 `uni-th` 或者 `uni-td` +- 一个表格内理论上只能包含表头行 +- 目前只能在 `uni-th` 中设置 width 属性,`uni-td` 的宽度跟随 `uni-th` 宽度变化 + + +```html + + + + 日期 + 姓名 + 地址 + + + + 2020-10-20 + Jeson + 北京市海淀区 + + + 2020-10-21 + HanMeiMei + 北京市海淀区 + + + 2020-10-22 + LiLei + 北京市海淀区 + + + 2020-10-23 + Danner + 北京市海淀区 + + + + + -``` -> Style +``` +> Style ```html - -``` -> tableData.js -```javascript + + +``` +> tableData.js +```javascript export default [{ "date": "2020-09-01", "name": "Dcloud1", @@ -469,9 +470,9 @@ export default [{ "date": "2020-09-16", "name": "Dcloud48", "address": "上海市普陀区金沙江路 1516 弄" -}] - -``` -::: - +}] + +``` +::: + [完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/table/table) \ No newline at end of file