diff --git a/docs/component/uniui/uni-table.md b/docs/component/uniui/uni-table.md index 4e4cbd28b1df90170f47c96e72c87a90ada62321..9d16f56ecc7385ccda6755a4851c54bcf833ca98 100644 --- a/docs/component/uniui/uni-table.md +++ b/docs/component/uniui/uni-table.md @@ -1,475 +1,474 @@ - -::: 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 - -``` -> Script -```html - -``` -> Style -```html - - -``` -> tableData.js -```javascript -export default [{ - "date": "2020-09-01", - "name": "Dcloud1", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-02", - "name": "Dcloud2", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-03", - "name": "Dcloud3", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-04", - "name": "Dcloud4", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-05", - "name": "Dcloud5", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-06", - "name": "Dcloud6", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-07", - "name": "Dcloud7", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-08", - "name": "Dcloud8", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-09", - "name": "Dcloud9", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-10", - "name": "Dcloud10", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-11", - "name": "Dcloud11", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-12", - "name": "Dcloud12", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-13", - "name": "Dcloud13", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-14", - "name": "Dcloud14", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-15", - "name": "Dcloud15", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-16", - "name": "Dcloud16", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-01", - "name": "Dcloud17", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-02", - "name": "Dcloud18", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-03", - "name": "Dcloud19", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-04", - "name": "Dcloud20", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-05", - "name": "Dcloud21", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-06", - "name": "Dcloud22", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-07", - "name": "Dcloud23", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-08", - "name": "Dcloud24", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-09", - "name": "Dcloud25", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-10", - "name": "Dcloud26", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-11", - "name": "Dcloud27", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-12", - "name": "Dcloud28", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-13", - "name": "Dcloud29", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-14", - "name": "Dcloud30", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-15", - "name": "Dcloud31", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-16", - "name": "Dcloud32", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-01", - "name": "Dcloud33", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-02", - "name": "Dcloud34", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-03", - "name": "Dcloud35", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-04", - "name": "Dcloud36", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-05", - "name": "Dcloud37", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-06", - "name": "Dcloud38", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-07", - "name": "Dcloud39", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-08", - "name": "Dcloud40", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-09", - "name": "Dcloud41", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-10", - "name": "Dcloud42", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-11", - "name": "Dcloud43", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-12", - "name": "Dcloud44", - "address": "上海市普陀区金沙江路 1516 弄" -}, { - "date": "2020-09-13", - "name": "Dcloud45", - "address": "上海市普陀区金沙江路 1518 弄" -}, { - "date": "2020-09-14", - "name": "Dcloud46", - "address": "上海市普陀区金沙江路 1517 弄" -}, { - "date": "2020-09-15", - "name": "Dcloud47", - "address": "上海市普陀区金沙江路 1519 弄" -}, { - "date": "2020-09-16", - "name": "Dcloud48", - "address": "上海市普陀区金沙江路 1516 弄" -}] - -``` -::: - -[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/table/table) \ No newline at end of file +::: 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 + +``` +> Script +```html + +``` +> Style +```html + + +``` +> tableData.js +```javascript +export default [{ + "date": "2020-09-01", + "name": "Dcloud1", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-02", + "name": "Dcloud2", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-03", + "name": "Dcloud3", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-04", + "name": "Dcloud4", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-05", + "name": "Dcloud5", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-06", + "name": "Dcloud6", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-07", + "name": "Dcloud7", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-08", + "name": "Dcloud8", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-09", + "name": "Dcloud9", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-10", + "name": "Dcloud10", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-11", + "name": "Dcloud11", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-12", + "name": "Dcloud12", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-13", + "name": "Dcloud13", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-14", + "name": "Dcloud14", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-15", + "name": "Dcloud15", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-16", + "name": "Dcloud16", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-01", + "name": "Dcloud17", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-02", + "name": "Dcloud18", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-03", + "name": "Dcloud19", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-04", + "name": "Dcloud20", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-05", + "name": "Dcloud21", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-06", + "name": "Dcloud22", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-07", + "name": "Dcloud23", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-08", + "name": "Dcloud24", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-09", + "name": "Dcloud25", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-10", + "name": "Dcloud26", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-11", + "name": "Dcloud27", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-12", + "name": "Dcloud28", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-13", + "name": "Dcloud29", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-14", + "name": "Dcloud30", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-15", + "name": "Dcloud31", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-16", + "name": "Dcloud32", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-01", + "name": "Dcloud33", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-02", + "name": "Dcloud34", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-03", + "name": "Dcloud35", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-04", + "name": "Dcloud36", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-05", + "name": "Dcloud37", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-06", + "name": "Dcloud38", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-07", + "name": "Dcloud39", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-08", + "name": "Dcloud40", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-09", + "name": "Dcloud41", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-10", + "name": "Dcloud42", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-11", + "name": "Dcloud43", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-12", + "name": "Dcloud44", + "address": "上海市普陀区金沙江路 1516 弄" +}, { + "date": "2020-09-13", + "name": "Dcloud45", + "address": "上海市普陀区金沙江路 1518 弄" +}, { + "date": "2020-09-14", + "name": "Dcloud46", + "address": "上海市普陀区金沙江路 1517 弄" +}, { + "date": "2020-09-15", + "name": "Dcloud47", + "address": "上海市普陀区金沙江路 1519 弄" +}, { + "date": "2020-09-16", + "name": "Dcloud48", + "address": "上海市普陀区金沙江路 1516 弄" +}] + +``` +::: + +[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/table/table)