[new feature] TreeSelect: main-active-index support sync modifier (#4132)

src/tree-select/README.md

@@ -91,7 +91,7 @@ export default {
 | items | Required datasets for the component | `Item[]` | `[]` |
 | height | Height | `string | number` | `300` |
 | main-Active-index | The index of selected parent node | `number` | `0` |
-| active-id | Id of selected item | `string | number` | `0` |
+| active-id | Id of selected item | `string | number | (string | number)[]` | `0` |
 
 ### Events
 

src/tree-select/README.zh-CN.md

@@ -17,8 +17,7 @@ Vue.use(TreeSelect);
 <van-tree-select
   :items="items"
   :active-id="activeId"
-  :main-active-index="mainActiveIndex"
-  @click-nav="onClickNav"
+  :main-active-index.sync="mainActiveIndex"
   @click-item="onClickItem"
 />
 ```
@@ -33,9 +32,6 @@ export default {
     };
   },
   methods: {
-    onClickNav(index) {
-      this.mainActiveIndex = index;
-    },
     onClickItem(data) {
       this.activeId = data.id;
     }
@@ -49,8 +45,7 @@ export default {
 <van-tree-select
   :items="items"
   :active-id="activeIds"
-  :main-active-index="mainActiveIndex"
-  @click-nav="onClickNav"
+  :main-active-index.sync="mainActiveIndex"
   @click-item="onClickItem"
 />
 ```
@@ -65,9 +60,6 @@ export default {
     };
   },
   methods: {
-    onClickNav(index) {
-      this.mainActiveIndex = index;
-    },
     onClickItem(data) {
       const { id } = data;
       const { activeIds } = this;
@@ -90,8 +82,8 @@ export default {
 |------|------|------|------|------|
 | items | 分类显示所需的数据 | `Item[]` | `[]` | - |
 | height | 高度，默认单位为 px | `string | number` | `300` | - |
-| main-active-index | 左侧导航高亮的索引 | `number` | `0` | - |
-| active-id | 右侧选择项，高亮的数据id | `string | number` | `0` | - |
+| main-active-index | 左侧高亮选项的索引 | `number` | `0` | - |
+| active-id | 右侧高亮选项的 id，支持传入数组 | `string | number | (string | number)[]` | `0` | - |
 
 ### Events
 

src/tree-select/demo/index.vue

@@ -3,9 +3,8 @@
     <demo-block :title="$t('radioMode')">
       <van-tree-select
         :items="items"
-        :main-active-index="mainActiveIndex"
+        :main-active-index.sync="mainActiveIndex"
         :active-id="activeId"
-        @navclick="onNavClick"
         @itemclick="onItemClick"
       />
     </demo-block>
@@ -13,9 +12,8 @@
     <demo-block :title="$t('multipleMode')">
       <van-tree-select
         :items="items"
-        :main-active-index="mainActiveIndex2"
+        :main-active-index.sync="mainActiveIndex2"
         :active-id="activeIds"
-        @navclick="onNavClick2"
         @itemclick="onItemClick2"
       />
     </demo-block>
@@ -140,18 +138,10 @@ export default {
   },
 
   methods: {
-    onNavClick(index) {
-      this.mainActiveIndex = index;
-    },
-
     onItemClick(data) {
       this.activeId = data.id;
     },
 
-    onNavClick2(index) {
-      this.mainActiveIndex2 = index;
-    },
-
     onItemClick2(data) {
       const { id } = data;
       const { activeIds } = this;

src/tree-select/index.tsx

@@ -63,6 +63,7 @@ function TreeSelect(
       onClick={() => {
         if (!item.disabled) {
           emit(ctx, 'click-nav', index);
+          emit(ctx, 'update:main-active-index', index);
 
           // compatible for old usage, should be removed in next major version
           emit(ctx, 'navclick', index);