fix: 修改 Picker 组件在 Taro 中v-model 失效问题

src/packages/__VUE/picker/index.taro.vue

@@ -85,7 +85,7 @@ export default create({
     ...popupProps,
     modelValue: {
       type: Array as PropType<(string | number)[]>,
-      default: () => []
+      default: []
     },
     title: {
       type: String,
@@ -133,7 +133,9 @@ export default create({
 
     const pickerline = ref(null);
     // 选中项
-    let defaultValues = ref<(number | string)[]>(props.modelValue);
+    let defaultValues = ref<(number | string)[]>(
+      Array.isArray(props.modelValue) && props.modelValue.length > 0 ? props.modelValue : []
+    );
     // 选中项的位置
     let defaultIndexes = ref<number[]>([]);
 
@@ -244,7 +246,6 @@ export default create({
         } else {
           defaultValues.value[columnIndex] = option.hasOwnProperty('value') ? option.value : '';
         }
-
         emit('change', {
           columnIndex: columnIndex,
           selectedValue: defaultValues.value,
@@ -253,7 +254,7 @@ export default create({
       }
     };
 
-    const defaultValuesConvert = computed(() => {
+    const defaultValuesConvert = () => {
       let defaultIndexs = [];
       if (defaultValues.value.length > 0) {
         defaultValues.value.forEach((value, index) => {
@@ -264,14 +265,18 @@ export default create({
             }
           }
         });
+      } else {
+        columnsList.value.forEach((item) => {
+          defaultIndexs.push(0);
+          defaultValues.value.push(item[0].value);
+        });
       }
 
       return defaultIndexs;
-    });
+    };
 
     // 平铺展示时，滚动选择
     const tileChange = ({ detail }) => {
-      console.log('选择');
       const prevDefaultValue = defaultIndexes.value;
       let changeIndex = 0;
       // 判断变化的是第几个
@@ -289,7 +294,6 @@ export default create({
     // 确定
     const confirmHandler = () => {
       if (state.picking) {
-        console.log('滚动中');
         setTimeout(() => {
           confirmHandlerAwit();
         }, 0);
@@ -305,7 +309,7 @@ export default create({
           selectedOptions.value.push(columns[0]);
         });
       }
-      console.log('确定', defaultValues.value);
+
       emit('confirm', {
         selectedValue: defaultValues.value,
         selectedOptions: selectedOptions.value
@@ -317,20 +321,17 @@ export default create({
 
     // 开始滚动
     const handlePickstart = () => {
-      console.log('开始滚动');
       state.picking = true;
     };
     // 开始滚动
     const handlePickend = () => {
-      console.log('滚动结束');
       state.picking = false;
     };
 
     const refRandomId = Math.random().toString(36).slice(-8);
 
     const getReference = async () => {
       const refe = await useTaroRect(pickerline, Taro);
-      console.log(refe.height);
       state.lineSpacing = refe.height ? refe.height : 36;
     };
 
@@ -341,7 +342,7 @@ export default create({
             getReference();
           }, 200);
         } else {
-          defaultIndexes.value = defaultValuesConvert.value;
+          defaultIndexes.value = defaultValuesConvert();
         }
         state.show = props.visible;
       }
@@ -357,7 +358,7 @@ export default create({
         const isSameValue = JSON.stringify(newValues) === JSON.stringify(defaultValues.value);
         if (!isSameValue) {
           defaultValues.value = newValues;
-          defaultIndexes.value = defaultValuesConvert.value;
+          defaultIndexes.value = defaultValuesConvert();
         }
       },
       { deep: true }
@@ -371,7 +372,7 @@ export default create({
           emit('update:modelValue', newValues);
         }
       },
-      { immediate: true }
+      { deep: true }
     );
 
     watch(
@@ -387,7 +388,7 @@ export default create({
 
             pickerColumn.value = [];
           } else {
-            defaultIndexes.value = defaultValuesConvert.value;
+            defaultIndexes.value = defaultValuesConvert();
           }
         }
       }
@@ -417,7 +418,6 @@ export default create({
       refRandomId,
       pickerline,
       tileChange,
-      defaultValuesConvert,
       handlePickstart,
       handlePickend
     };

src/packages/__VUE/picker/index.vue

@@ -33,7 +33,7 @@
             :column="column"
             :readonly="readonly"
             :columnsType="columnsType"
-            :value="defaultValues[columnIndex]"
+            :value="defaultValues && defaultValues[columnIndex]"
             :threeDimensional="threeDimensional"
             :swipeDuration="swipeDuration"
             @change="
@@ -116,7 +116,9 @@ export default create({
     });
 
     // 选中项
-    let defaultValues = ref<(number | string)[]>(props.modelValue);
+    let defaultValues = ref<(number | string)[]>(
+      Array.isArray(props.modelValue) && props.modelValue.length > 0 ? props.modelValue : []
+    );
 
     const pickerColumn = ref<any[]>([]);
 
@@ -163,7 +165,11 @@ export default create({
           return state.formattedColumns as PickerOption[][];
         case 'cascade':
           // 级联数据处理
-          return formatCascade(state.formattedColumns as PickerOption[], defaultValues.value);
+
+          return formatCascade(
+            state.formattedColumns as PickerOption[],
+            defaultValues.value ? defaultValues.value : []
+          );
         default:
           return [state.formattedColumns] as PickerOption[][];
       }
@@ -204,6 +210,8 @@ export default create({
 
     const changeHandler = (columnIndex: number, option: PickerOption) => {
       if (option && Object.keys(option).length) {
+        defaultValues.value = defaultValues.value ? defaultValues.value : [];
+
         if (columnsType.value === 'cascade') {
           defaultValues.value[columnIndex] = option.value ? option.value : '';
           let index = columnIndex;
@@ -277,14 +285,16 @@ export default create({
           emit('update:modelValue', newValues);
         }
       },
-      { immediate: true }
+      { deep: true }
     );
 
     watch(
       () => props.visible,
       (val) => {
         state.show = val;
-        if (val) pickerColumn.value = [];
+        if (val) {
+          pickerColumn.value = [];
+        }
       }
     );