[improvement] TreeSelect: support disable option (#2107)

packages/tree-select/demo/index.vue

@@ -21,29 +21,30 @@ export default {
       group3: '江苏',
       city1: [{
         text: '杭州',
-        id: 1001
+        id: 1
       }, {
         text: '温州',
-        id: 1002
+        id: 2
       }, {
         text: '宁波',
-        id: 1003
+        id: 3,
+        disabled: true
       }, {
         text: '义乌',
-        id: 1004
+        id: 4
       }],
       city2: [{
         text: '南京',
-        id: 1011
+        id: 5
       }, {
         text: '无锡',
-        id: 1012
+        id: 6
       }, {
         text: '徐州',
-        id: 1013
+        id: 7
       }, {
         text: '苏州',
-        id: 1014
+        id: 8
       }]
     },
     'en-US': {
@@ -52,29 +53,30 @@ export default {
       group3: 'Group2',
       city1: [{
         text: 'Delaware',
-        id: 1001
+        id: 1
       }, {
         text: 'Florida',
-        id: 1002
+        id: 2
       }, {
         text: 'Georqia',
-        id: 1003
+        id: 3,
+        disabled: true
       }, {
         text: 'Indiana',
-        id: 1004
+        id: 4
       }],
       city2: [{
         text: 'Alabama',
-        id: 1011
+        id: 5
       }, {
         text: 'Kansas',
-        id: 1012
+        id: 6
       }, {
         text: 'Louisiana',
-        id: 1013
+        id: 7
       }, {
         text: 'Texas',
-        id: 1014
+        id: 8
       }]
     }
   },
@@ -82,7 +84,7 @@ export default {
   data() {
     return {
       mainActiveIndex: 0,
-      activeId: 1001
+      activeId: 1
     };
   },
 

packages/tree-select/en-US.md

@@ -25,7 +25,7 @@ Vue.use(TreeSelect);
 export default {
   data() {
     return {
-      items: items,
+      items,
       // the index of parent item
       mainActiveIndex: 0,
       // the id of selected item
@@ -77,13 +77,13 @@ In every tree object, `text` property defines `id` stands for the unique key whi
         // name of the leaf node
         text: 'Washington',
         // id of the leaf node, component highlights leaf node by comparing the activeId with this.
-        id: 1002
+        id: 1,
+        // disable options
+        disabled: true
       },
       {
-        // name of the leaf node
         text: 'Baltimore',
-        // id of the leaf node, component highlights leaf node by comparing the activeId with this.
-        id: 1001
+        id: 2
       }
     ]
   }

packages/tree-select/index.less

@@ -48,6 +48,11 @@
     &--active {
       color: @red;
     }
+
+    &--disabled,
+    &--disabled:active {
+      color: @gray;
+    }
   }
 
   &__selected {

packages/tree-select/index.vue

@@ -18,7 +18,10 @@
         v-for="item in subItems"
         :key="item.id"
         class="van-ellipsis"
-        :class="b('item', { active: activeId === item.id })"
+        :class="b('item', {
+          active: activeId === item.id,
+          disabled: item.disabled
+        })"
         @click="onItemSelect(item)"
       >
         {{ item.text }}
@@ -66,7 +69,9 @@ export default create({
 
   methods: {
     onItemSelect(data) {
-      this.$emit('itemclick', data);
+      if (!data.disabled) {
+        this.$emit('itemclick', data);
+      }
     }
   }
 });

packages/tree-select/test/__snapshots__/demo.spec.js.snap

@@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
           温州
           <!---->
         </div>
-        <div class="van-ellipsis van-tree-select__item">
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">
           宁波
           <!---->
         </div>

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

@@ -14,11 +14,17 @@ test('select item', () => {
     propsData: {
       items: [{
         text: 'group1',
-        children: [item]
+        children: [
+          item,
+          { ...item, disabled: true }
+        ]
       }]
     }
   });
 
-  wrapper.find('.van-tree-select__item').trigger('click');
+  const items = wrapper.findAll('.van-tree-select__item');
+  items.at(0).trigger('click');
   expect(wrapper.emitted('itemclick')[0][0]).toEqual(item);
+  items.at(1).trigger('click');
+  expect(wrapper.emitted('itemclick')[1]).toBeFalsy();
 });

packages/tree-select/zh-CN.md

@@ -11,7 +11,6 @@ Vue.use(TreeSelect);
 
 #### 基础用法
 
-
 ```html
 <van-tree-select
   :items="items"
@@ -26,11 +25,11 @@ Vue.use(TreeSelect);
 export default {
   data() {
     return {
-      items: items,
+      items,
       // 左侧高亮元素的index
       mainActiveIndex: 0,
       // 被选中元素的id
-      activeId: 1001
+      activeId: 1
     };
   },
   methods: {
@@ -64,9 +63,9 @@ export default {
 
 ### 数据格式
 #### items 分类显示所需数据的数据结构
-`items` 整体为一个数组，数组内包含一系列描述分类的 object。
+`items` 整体为一个数组，数组内包含一系列描述分类的对象。
 
-每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项
+每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项
 ```javascript
 [
   {
@@ -75,16 +74,16 @@ export default {
     // 该导航下所有的可选项
     children: [
       {
-        // 可选项的名称
+        // 名称
         text: '温州',
-        // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
-        id: 1002
+        // id，作为匹配选中状态的标识
+        id: 1,
+        // 禁用选项
+        disabled: true
       },
       {
-        // 可选项的名称
         text: '杭州',
-        // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
-        id: 1001
+        id: 2
       }
     ]
   }