feat(TreeSelect): add max prop (#4323)

src/tree-select/README.md

@@ -97,6 +97,7 @@ export default {
 | height | Height | *string \| number* | `300` | - |
 | main-Active-index | The index of selected parent node | *number* | `0` | - |
 | active-id | Id of selected item | *string \| number \| (string \| number)[]* | `0` | - |
+| max | Maximum number of selected items | *number* | `Infinity` | 2.1.9 |
 
 ### Events
 

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

@@ -101,8 +101,9 @@ export default {
 |------|------|------|------|------|
 | items | 分类显示所需的数据 | *Item[]* | `[]` | - |
 | height | 高度，默认单位为 px | *string \| number* | `300` | - |
-| main-active-index | 左侧高亮选项的索引 | *number* | `0` | - |
+| main-active-index | 左侧选中项的索引 | *number* | `0` | - |
-| active-id | 右侧高亮选项的 id，支持传入数组 | *string \| number \| (string \| number)[]* | `0` | - |
+| active-id | 右侧选中项的 id，支持传入数组 | *string \| number \| (string \| number)[]* | `0` | - |
+| max | 右侧项最大选中个数 | *number* | *Infinity* | 2.1.9 |
 
 ### Events
 

src/tree-select/index.tsx

@@ -21,6 +21,7 @@ export type TreeSelectChildren = {
 export type TreeSelectActiveId = number | string | (number | string)[];
 
 export type TreeSelectProps = {
+  max: number;
   height: number | string;
   items: TreeSelectItem[];
   activeId: TreeSelectActiveId;
@@ -100,7 +101,7 @@ function TreeSelect(
 
               if (index !== -1) {
                 newActiveId.splice(index, 1);
-              } else {
+              } else if (newActiveId.length < props.max) {
                 newActiveId.push(item.id);
               }
             }
@@ -130,6 +131,10 @@ function TreeSelect(
 }
 
 TreeSelect.props = {
+  max: {
+    type: Number,
+    default: Infinity
+  },
   items: {
     type: Array,
     default: () => []

src/tree-select/test/index.spec.js

@@ -233,3 +233,33 @@ test('multiple select', () => {
   items.at(1).trigger('click');
   expect(wrapper.vm.activeId).toEqual([]);
 });
+
+test('max prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :max="1"
+        :items="items"
+        :main-active-index="0"
+        :active-id.sync="activeId"
+      />
+    `,
+    data() {
+      return {
+        activeId: [],
+        mainActiveIndex: 0,
+        items: [
+          {
+            text: 'group1',
+            children: [mockItem, mockItem2]
+          }
+        ]
+      };
+    }
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items.at(0).trigger('click');
+  items.at(1).trigger('click');
+  expect(wrapper.vm.activeId).toEqual([mockItem.id]);
+});