Merge pull request #5380 from landluck/hotfix/fix_issue_5379

fix(cascader): fix error display of async data

example/project.config.json

@@ -38,7 +38,8 @@
     "packNpmRelationList": [],
     "minifyWXSS": true,
     "showES6CompileOption": false,
-    "ignoreUploadUnusedFiles": true
+    "ignoreUploadUnusedFiles": true,
+    "condition": false
   },
   "compileType": "miniprogram",
   "libVersion": "2.6.5",
@@ -333,6 +334,12 @@
           "pathName": "pages/divider/index",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "cascader",
+          "pathName": "pages/cascader/index",
+          "query": "",
+          "scene": null
         }
       ]
     }

packages/cascader/index.ts

@@ -24,7 +24,6 @@ VantComponent({
     title: String,
     value: {
       type: String,
-      observer: 'updateValue',
     },
     placeholder: {
       type: String,
@@ -37,7 +36,6 @@ VantComponent({
     options: {
       type: Array,
       value: [],
-      observer: 'updateOptions',
     },
     swipeable: {
       type: Boolean,
@@ -68,6 +66,16 @@ VantComponent({
     textKey: FieldName.TEXT,
     valueKey: FieldName.VALUE,
     childrenKey: FieldName.CHILDREN,
+    innerValue: '',
+  },
+
+  watch: {
+    options() {
+      this.updateTabs();
+    },
+    value(newVal) {
+      this.updateValue(newVal);
+    },
   },
 
   created() {
@@ -75,11 +83,7 @@ VantComponent({
   },
 
   methods: {
-    updateOptions(val, oldVal) {
-      const isAsync = !!(val.length && oldVal.length);
-      this.updateTabs(isAsync);
-    },
-    updateValue(val) {
+    updateValue(val: string) {
       if (val !== undefined) {
         const values = this.data.tabs.map(
           (tab: ITab) => tab.selected && tab.selected[this.data.valueKey]
@@ -88,6 +92,9 @@ VantComponent({
           return;
         }
       }
+
+      this.innerValue = val;
+
       this.updateTabs();
     },
     updateFieldNames() {
@@ -121,11 +128,19 @@ VantComponent({
         }
       }
     },
-    updateTabs(isAsync = false) {
-      const { options, value } = this.data;
+    updateTabs() {
+      const { options } = this.data;
+      const { innerValue } = this;
 
-      if (value !== undefined) {
-        const selectedOptions = this.getSelectedOptionsByValue(options, value);
+      if (!options.length) {
+        return;
+      }
+
+      if (innerValue !== undefined) {
+        const selectedOptions = this.getSelectedOptionsByValue(
+          options,
+          innerValue
+        );
 
         if (selectedOptions) {
           let optionsCursor = options;
@@ -167,17 +182,6 @@ VantComponent({
         }
       }
 
-      // 异步更新
-      if (isAsync) {
-        const { tabs } = this.data;
-        tabs[tabs.length - 1].options =
-          options[options.length - 1][this.data.childrenKey];
-        this.setData({
-          tabs,
-        });
-        return;
-      }
-
       this.setData({
         tabs: [
           {
@@ -239,12 +243,16 @@ VantComponent({
 
       const selectedOptions = tabs.map((tab) => tab.selected).filter(Boolean);
 
+      const value = option[valueKey];
+
       const params = {
-        value: option[valueKey],
+        value,
         tabIndex,
         selectedOptions,
       };
 
+      this.innerValue = value;
+
       this.$emit('change', params);
 
       if (!option[childrenKey]) {

packages/cascader/index.wxml

@@ -37,14 +37,14 @@
         wx:for="{{ tab.options }}"
         wx:for-item="option"
         wx:key="index"
-        class="{{ option.className }} {{ utils.optionClass(tab, textKey, option) }}"
-        style="{{ utils.optionStyle({ tab, textKey, option, activeColor }) }}"
+        class="{{ option.className }} {{ utils.optionClass(tab, valueKey, option) }}"
+        style="{{ utils.optionStyle({ tab, valueKey, option, activeColor }) }}"
         data-option="{{ option }}"
         data-tab-index="{{ tabIndex }}"
         bind:tap="onSelect"
       >
         <text>{{ option[textKey] }}</text>
-        <van-icon wx:if="{{ utils.isSelected(tab, textKey, option) }}" name="success" size="18" />
+        <van-icon wx:if="{{ utils.isSelected(tab, valueKey, option) }}" name="success" size="18" />
       </view>
     </view>
     <!-- 暂不支持 -->

packages/cascader/index.wxs

@@ -1,16 +1,16 @@
 var utils = require('../wxs/utils.wxs');
 var style = require('../wxs/style.wxs');
 
-function isSelected(tab, textKey, option) {
-  return tab.selected && tab.selected[textKey] === option[textKey]
+function isSelected(tab, valueKey, option) {
+  return tab.selected && tab.selected[valueKey] === option[valueKey]
 }
 
-function optionClass(tab, textKey, option) {
-  return utils.bem('cascader__option', { selected: isSelected({ tab, textKey, option }), disabled: option.disabled })
+function optionClass(tab, valueKey, option) {
+  return utils.bem('cascader__option', { selected: isSelected(tab, valueKey, option), disabled: option.disabled })
 }
 
 function optionStyle(data) {
-  var color = data.option.color || (isSelected(data.tab, data.textKey, data.option) ? data.activeColor : undefined);
+  var color = data.option.color || (isSelected(data.tab, data.valueKey, data.option) ? data.activeColor : undefined);
   return style({
     color
   });