diff --git a/src/tree-select/README.md b/src/tree-select/README.md
index dcb2bc352..efb8c4988 100644
--- a/src/tree-select/README.md
+++ b/src/tree-select/README.md
@@ -64,14 +64,8 @@ export default {
:main-active-index.sync="activeIndex"
>
-
-
+
+
```
@@ -87,6 +81,30 @@ export default {
}
```
+### Show Info
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ activeIndex: 0,
+ items: [
+ { text: 'Group 1', children: [], dot: true },
+ { text: 'Group 2', children: [], info: 5 }
+ ]
+ }
+ }
+}
+```
+
## API
### Props
@@ -125,6 +143,8 @@ In every tree object, `text` property defines `id` stands for the unique key whi
text: 'Group 1',
// info
info: 3,
+ // Whether to show red dot
+ dot: true,
// leaves of this parent node
children: [
{
diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md
index 0a242ec24..a0b177a6b 100644
--- a/src/tree-select/README.zh-CN.md
+++ b/src/tree-select/README.zh-CN.md
@@ -70,14 +70,8 @@ export default {
:main-active-index.sync="activeIndex"
>
-
-
+
+
```
@@ -93,6 +87,32 @@ export default {
}
```
+### 提示信息
+
+设置`dot`属性后,会在图标右上角展示一个小红点。设置`info`属性后,会在图标右上角展示相应的徽标
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ activeIndex: 0,
+ items: [
+ { text: '浙江', children: [], dot: true },
+ { text: '江苏', children: [], info: 5 }
+ ]
+ }
+ }
+}
+```
+
## API
### Props
@@ -129,6 +149,8 @@ export default {
text: '所有城市',
// 导航名称右上角徽标
info: 3,
+ // 是否在导航名称右上角显示小红点
+ dot: true,
// 该导航下所有的可选项
children: [
{
diff --git a/src/tree-select/demo/index.vue b/src/tree-select/demo/index.vue
index ae8071c7e..e75847aef 100644
--- a/src/tree-select/demo/index.vue
+++ b/src/tree-select/demo/index.vue
@@ -24,16 +24,22 @@
+
+
+
+