记录一个下拉菜单同时传输label 和 value的方案

注意：有时候不是必须两个都在前端展示，有时候是作为数据冗余，方便查询。

可视部分

<div>
   <n-form-item label="企业名称" path="companyName">
     <n-form-item label="企业名称" path="companyCode">
       <n-select
           v-model:value="model.companyCode"
           filterable
           placeholder="请输入营业执照上的单位名称"
           :options="options"
           :loading="loading"
           clearable
           remote
           @search="getCompanyList"
       />
     </n-form-item>
   </n-form-item>
 </div>
 <div>
   <n-form-item label="统一信用代码" path="companyCode">
     <n-input
         v-model:value="model.companyCode"
         type="text"
         placeholder="请输入统一信用代码"
         class="input-item"
     >
     </n-input>
   </n-form-item>
 </div>

注意两个接收值都是 companyCode

获取选项 与 反翻译选项

const options = ref<any>([])
  const loading = ref(false)
  function getCompanyList(value) {
    if (!value.length) {
      options.value = []
      return
    }
    loading.value = true
    getEnterpriseOptionApi(value).then((res) => {
      options.value = res.rows
      loading.value = false
    }).catch((err) => {
      loading.value = false
    })
  }

  // 翻译公司编码对应的公司名称
  function getCompanyName(code: string) {
    const option = options.value.find(item => item.value === code)
    return option?.label || null
  }

记得把label赋给表单项，同时记得在前端或后端判空‘

model.value.companyName = getCompanyName(model.value.companyCode)

  const formRef = ref(null)
  function submitForm() {
    model.value.companyName = getCompanyName(model.value.companyCode)
    formRef.value?.validate((errors) => {
      if (!errors) {
        addNewBindCompanyApi(model.value).then((res)=>{
          router.replace('/profile/relationCompany')
          notification.success({
            content: '提交成功',
            meta: '您成功提交关联企业',
            duration: 2000
          })
        }).catch((err)=>{
          notification.error({
            content: '提交失败',
            meta: err?.msg,
            duration: 2000
          })

        })
      }
    })
  }

痛点：

• 不管是ElementUI、NaiveUI，每次都要写这“反翻译选项”一段代码
• 记得对Label判空，不管是前端还是后端，一定要确保！！！其实忘记了，也有一定的补救方案，因为value不为空。
• 这种方案还是比较简单的