fix: 🐛 修复picker选择器在APP端包装二维数组逻辑错误导致无法实现多列选择器的问题

Author: xuqingkai

src/uni_modules/wot-design-uni/components/wd-picker-view/types.ts

@@ -1,6 +1,6 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType, Ref } from 'vue'
 import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
-import { getType } from '../common/util'
+import { getType, isArray, isObj } from '../common/util'
 
 export type ColumnItem = {
   [key: string]: any
@@ -80,7 +80,7 @@ export type PickerViewInstance = ComponentPublicInstance<PickerViewProps, Picker
  * @param {string} labelKey labelKey
  */
 export function formatArray(array: Array<string | number | ColumnItem | Array<string | number | ColumnItem>>, valueKey: string, labelKey: string) {
-  let tempArray: Array<string | number | ColumnItem | Array<string | number | ColumnItem>> = array instanceof Array ? array : [array]
+  let tempArray: Array<string | number | ColumnItem | Array<string | number | ColumnItem>> = isArray(array) ? array : [array]
   // 检测第一层的type
   const firstLevelTypeList = new Set(array.map(getType))
   /**
@@ -97,15 +97,14 @@ export function formatArray(array: Array<string | number | ColumnItem | Array<st
    * 数组的所有一维子元素都不是array，说明是它是一个一维数组
    * 所以需要把一维的转成二维，这样方便统一处理
    */
-  if (!(array[0] instanceof Array)) {
+  if (!isArray(array[0])) {
     tempArray = [tempArray as Array<string | number | ColumnItem>]
   }
   // 经过上述处理，都已经变成了二维数组，再把每一项二维元素包装成object
   const result: Array<Array<ColumnItem>> = (tempArray as Array<Array<string | number | ColumnItem>>).map((col) => {
     return col.map((row) => {
-      const isObj = getType(row)
       /* 针对原始值，包装成{valueKey,labelKey} */
-      if (isObj !== 'object') {
+      if (!isObj(row)) {
         return {
           [valueKey]: row,
           [labelKey]: row

src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue

@@ -86,7 +86,7 @@ export default {
 
 <script lang="ts" setup>
 import { getCurrentInstance, onBeforeMount, ref, watch, computed, onMounted, nextTick } from 'vue'
-import { deepClone, defaultDisplayFormat, getType, isArray, isDef } from '../common/util'
+import { deepClone, defaultDisplayFormat, getType, isArray, isDef, isFunction } from '../common/util'
 import { useCell } from '../composables/useCell'
 import { type ColumnItem, formatArray } from '../wd-picker-view/types'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
@@ -112,14 +112,16 @@ const resetColumns = ref<Array<string | number | ColumnItem | Array<string | num
 const isPicking = ref<boolean>(false) // 判断pickview是否还在滑动中
 const hasConfirmed = ref<boolean>(false) // 判断用户是否点击了确认按钮
 
+const emit = defineEmits(['confirm', 'open', 'cancel', 'update:modelValue'])
+
 const isLoading = computed(() => {
   return props.loading || innerLoading.value
 })
 
 watch(
   () => props.displayFormat,
   (fn) => {
-    if (fn && getType(fn) !== 'function') {
+    if (fn && !isFunction(fn)) {
       console.error('The type of displayFormat must be Function')
     }
     if (pickerViewWd.value && pickerViewWd.value.selectedIndex && pickerViewWd.value.selectedIndex.length !== 0) {
@@ -186,7 +188,7 @@ watch(
 watch(
   () => props.columnChange,
   (newValue) => {
-    if (newValue && getType(newValue) !== 'function') {
+    if (newValue && !isFunction(newValue)) {
       console.error('The type of columnChange must be Function')
     }
   },
@@ -223,8 +225,6 @@ const isRequired = computed(() => {
 
 const { proxy } = getCurrentInstance() as any
 
-const emit = defineEmits(['confirm', 'open', 'cancel', 'update:modelValue'])
-
 onMounted(() => {
   isDef(props.modelValue) && props.modelValue !== '' && setShowValue(getSelects(props.modelValue)!)
   if (isDef(props.modelValue) && props.modelValue !== '' && pickerViewWd.value && pickerViewWd.value.getSelects) {
@@ -257,7 +257,7 @@ function getSelects(value: string | number | Array<string | number | Array<any>>
    * 2.根据formatColumns的长度截取Array<String>，保证下面的遍历不溢出
    * 3.根据每列的key值找到选项中value为此key的下标并记录
    */
-  value = value instanceof Array ? value : [value]
+  value = isArray(value) ? value : [value]
   value = value.slice(0, formatColumns.length)
 
   if (value.length === 0) {
@@ -319,7 +319,7 @@ function onConfirm() {
   }
 
   const { beforeConfirm } = props
-  if (beforeConfirm && getType(beforeConfirm) === 'function') {
+  if (beforeConfirm && isFunction(beforeConfirm)) {
     beforeConfirm(
       pickerValue.value,
       (isPass: boolean) => {
@@ -363,7 +363,7 @@ function pickerViewChange({ value }: any) {
  */
 function setShowValue(items: ColumnItem | ColumnItem[]) {
   // 避免值为空时调用自定义展示函数
-  if ((items instanceof Array && !items.length) || !items) return
+  if ((isArray(items) && !items.length) || !items) return
 
   const { valueKey, labelKey } = props
   showValue.value = (props.displayFormat || defaultDisplayFormat)(items, { valueKey, labelKey })