feat(Cascader): watch value and reset options

src/cascader/README.zh-CN.md

@@ -37,14 +37,14 @@ export default {
 
 ### Props
 
-| 参数         | 说明               | 类型                   | 默认值    |
-| ------------ | ------------------ | ---------------------- | --------- |
-| title        | 顶部标题           | _string_               | -         |
-| value        | 选中项的值         | _string[] \| number[]_ | -         |
-| options      | 可选项数据源       | _Option[]_             | `[]`      |
-| placeholder  | 未选中时的提示文案 | _string_               | `请选择`  |
-| active-color | 选中状态的高亮颜色 | _string_               | `#ee0a24` |
-| closeable    | 是否显示关闭图标   | _boolean_              | `true`    |
+| 参数         | 说明               | 类型               | 默认值    |
+| ------------ | ------------------ | ------------------ | --------- |
+| title        | 顶部标题           | _string_           | -         |
+| value        | 选中项的值         | _string \| number_ | -         |
+| options      | 可选项数据源       | _Option[]_         | `[]`      |
+| placeholder  | 未选中时的提示文案 | _string_           | `请选择`  |
+| active-color | 选中状态的高亮颜色 | _string_           | `#ee0a24` |
+| closeable    | 是否显示关闭图标   | _boolean_          | `true`    |
 
 ### Events
 

src/cascader/demo/index.vue

@@ -5,12 +5,13 @@
         is-link
         readonly
         :label="t('area')"
-        :value="base.value"
+        :value="base.result"
         :placeholder="t('selectArea')"
         @click="base.show = true"
       />
       <van-popup v-model="base.show" round position="bottom">
         <van-cascader
+          v-model="base.value"
           :title="t('selectArea')"
           :options="t('options')"
           @close="base.show = false"
@@ -24,12 +25,13 @@
         is-link
         readonly
         :label="t('area')"
-        :value="customColor.value"
+        :value="customColor.result"
         :placeholder="t('selectArea')"
         @click="customColor.show = true"
       />
       <van-popup v-model="customColor.show" round position="bottom">
         <van-cascader
+          v-model="customColor.value"
           :title="t('selectArea')"
           :options="t('options')"
           active-color="#1989fa"
@@ -64,20 +66,23 @@ export default {
       base: {
         show: false,
         value: '',
+        result: '',
       },
       customColor: {
         show: false,
-        value: '',
+        value: null,
+        result: '',
       },
     };
   },
 
   methods: {
-    onFinish(type, { selectedOptions }) {
-      const fieldValue = selectedOptions.map((option) => option.text).join('/');
+    onFinish(type, { value, selectedOptions }) {
+      const result = selectedOptions.map((option) => option.text).join('/');
       this[type] = {
         show: false,
-        value: fieldValue,
+        value,
+        result,
       };
     },
   },

src/cascader/index.js

@@ -7,8 +7,8 @@ const [createComponent, bem] = createNamespace('cascader');
 
 export default createComponent({
   props: {
-    value: Array,
     title: String,
+    value: [Number, String],
     options: Array,
     placeholder: String,
     activeColor: String,
@@ -30,29 +30,82 @@ export default createComponent({
       // reset options and tab
     },
 
-    value() {
-      // reset options and tab
+    value(value) {
+      if (value) {
+        const values = this.tabs.map((tab) => tab.selectedOption?.value);
+        if (values.indexOf(value) !== -1) {
+          return;
+        }
+      }
+      this.updateTabs();
     },
   },
 
   created() {
-    this.init();
+    this.updateTabs();
   },
 
   methods: {
-    init() {
-      if (this.value) {
-        //
-      } else {
-        this.tabs = [
-          {
-            options: this.options,
-            selectedOption: null,
-          },
-        ];
+    getSelectedOptionsByValue(options, value) {
+      for (let i = 0; i < options.length; i++) {
+        const option = options[i];
+
+        if (option.value === value) {
+          return [option];
+        }
+
+        if (option.children) {
+          const selectedOptions = this.getSelectedOptionsByValue(
+            option.children,
+            value
+          );
+          if (selectedOptions) {
+            return [option, ...selectedOptions];
+          }
+        }
       }
     },
 
+    updateTabs() {
+      if (this.value) {
+        const selectedOptions = this.getSelectedOptionsByValue(
+          this.options,
+          this.value
+        );
+
+        if (selectedOptions) {
+          let optionsCursor = this.options;
+
+          this.tabs = selectedOptions.map((option) => {
+            const tab = {
+              options: optionsCursor,
+              selectedOption: option,
+            };
+
+            const next = optionsCursor.filter(
+              (item) => item.value === option.value
+            );
+            if (next.length) {
+              optionsCursor = next[0].children;
+            }
+
+            return tab;
+          });
+
+          this.activeTab = selectedOptions.length - 1;
+
+          return;
+        }
+      }
+
+      this.tabs = [
+        {
+          options: this.options,
+          selectedOption: null,
+        },
+      ];
+    },
+
     onSelect(option, tabIndex) {
       this.tabs[tabIndex].selectedOption = option;
 
@@ -82,6 +135,7 @@ export default createComponent({
         tabIndex,
         selectedOptions: this.tabs.map((tab) => tab.selectedOption),
       };
+      this.$emit('input', option.value);
       this.$emit('change', eventParams);
 
       if (!option.children) {