關(guān)于VanCascader默認(rèn)值(地址code轉(zhuǎn)換)

更新時(shí)間：2024年07月02日 09:11:09 作者：不是LIsa.

這篇文章主要介紹了關(guān)于VanCascader默認(rèn)值(地址code轉(zhuǎn)換),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

VanCascader默認(rèn)值(地址code轉(zhuǎn)換)

我在使用VanCascader的時(shí)候，發(fā)現(xiàn)頁面刷新進(jìn)入時(shí)組件沒有默認(rèn)值，提示的是placeholder“請(qǐng)輸入地址”

我希望進(jìn)去時(shí)顯示我傳入的值

如：

“湖北省武漢市洪山區(qū)”，（code:110101)
一般傳入的是code值，故希望兩者轉(zhuǎn)化

話不多說上代碼：

<script lang="ts" setup>
import { useCascaderAreaData } from '@vant/area-data'
import type { CascaderOption } from 'vant'
 
const props = defineProps<{
  modelValue: string
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', v: string): void
}>()
 
const show = ref(false)
 
interface OptionWithParents {
  option: CascaderOption | null
  parent: CascaderOption | null
  grandparent: CascaderOption | null
}
 
function findOptionWithParents(options: CascaderOption[], targetValue: string, parent: CascaderOption | null, grandparent: CascaderOption | null): OptionWithParents | null {
  for (const option of options) {
    if (option.value === targetValue)
      return { option, parent, grandparent }
 
    if (option.children && option.children.length > 0) {
      const result = findOptionWithParents(option.children, targetValue, option, parent)
      if (result)
        return result
    }
  }
  return null
}
 
function getLabelByValue(options: CascaderOption[], targetValue: string) {
  const { option, parent, grandparent } = findOptionWithParents(options, targetValue, null, null)
  if (option && parent && grandparent)
    return [grandparent.text, parent.text, option.text].join('/')
  return ''
}
 
const fieldValue = ref(props.modelValue)
const options = useCascaderAreaData()
 
function onFinish({ selectedOptions, value }: { selectedOptions: CascaderOption[]; value: string }) {
  show.value = false
  fieldValue.value = selectedOptions.map(option => option.text).join('/')
  emit('update:modelValue', value)
}
nextTick(() => {
  fieldValue.value = getLabelByValue(options, props.modelValue)
})
</script>

<template>
  <van-field
    :model-value="fieldValue"
    is-link
    readonly
    label="所在地區(qū)"
    placeholder="選擇地區(qū)"
    @click="show = true"
  />
  <van-popup v-model:show="show" round position="bottom">
    <van-cascader
      :model-value="modelValue"
      title="請(qǐng)選擇所在地區(qū)"
      :options="options"
      @close="show = false"
      @finish="onFinish"
    />
  </van-popup>
</template>

接下來就是運(yùn)行結(jié)果圖：