快捷導(dǎo)航

vue使用el-select下拉框匹配不到值的問題及解決

更新時(shí)間：2023年05月20日 10:51:51 作者：鐵錘妹妹@

這篇文章主要介紹了vue使用el-select下拉框匹配不到值的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用el-select下拉框匹配不到值的問題

問題描述

點(diǎn)擊編輯彈窗里從上面列表行數(shù)據(jù)里取到的乙方名稱變成了乙方id15，產(chǎn)生的原因是因?yàn)閺棿袄锏募滓曳搅斜硎菑慕涌谡?qǐng)求來的，比如后期某個(gè)乙方公司關(guān)停了，這條數(shù)據(jù)就會(huì)被刪除，導(dǎo)致我們?nèi)〔坏竭@條數(shù)據(jù)

查看接口返回的列表，發(fā)現(xiàn)少了行數(shù)據(jù)中的乙方這條數(shù)據(jù)

解決思路

1.findIndex() 返回值判斷編輯當(dāng)前行數(shù)據(jù)取到的id和甲乙方列表里的id是否有一樣的；如果有相同id的話，返回第一個(gè)符合條件的數(shù)組成員位置，都不符合條件，則返回 -1

2.如果返回?cái)?shù)組成員位置 < 0 的話，從列表行數(shù)據(jù)取id和name值，創(chuàng)建一條被刪除這條數(shù)據(jù)的新對(duì)象；push進(jìn)數(shù)組的最后一條，這樣就不存在id取不到的情況了

解決方法

 <el-form-item v-if="showPartner === '1'" label="甲方">
        <el-select v-model="partnerForm.partner_id_a" filterable>
          <el-option
            v-for="(val, key) in partnerAList"
            :key="key"
            :label="val.partner_name"
            :value="val.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showPartner === '1'" label="乙方">
        <el-select v-model="partnerForm.partner_id_b" filterable>
          <el-option
            v-for="(val, key) in partnerBList"
            :key="key"
            :label="val.partner_name"
            :value="val.id"
          />
        </el-select>
      </el-form-item>

setup(props, { emit }) {
    const partnerAList = ref<any[]>([])
    const partnerBList = ref<any[]>([])
    const showPartner = ref<string>('0')
    const dataMap = reactive({
      partnerForm: {
        phone: '',
        partner_id_a: '0',
        partner_id_b: '0',
        username: '',
        remark: '',
        status: ''
      }
    })
    const { onSubmit, close, formNode, subLoading } = useForm({ type: props.type, emit: emit, editApi: partnerApi['EDITPARTNERUSER'], addApi: partnerApi['ADDPARTNERUSER'], form: dataMap.partnerForm }) 
    function getPartnerAList() {
      partnerApi['GETPARTNERALIST']().then((res: any) => {
        if (res.data.code === '20000') {
          partnerAList.value = res.data.data
          var tempObj = { id: '0', partner_name: '請(qǐng)選擇' }
          partnerAList.value.unshift(tempObj)
          const temp = res.data.data.findIndex((item:any) => {
            return item.id === props.info['partner_id_a']
          })
          if (temp < 0) {
            const presentObj = { id: props.info['partner_id_a'], partner_name: props.info['party_a_name'] }
            partnerAList.value.push(presentObj)
          }
        }
      })
    }
    function getPartnerBList() {
      partnerApi['GETPARTNERBLIST']().then((res: any) => {
        if (res.data.code === '20000') {
          partnerBList.value = res.data.data
          var tempObj = { id: '0', partner_name: '請(qǐng)選擇' }
          partnerBList.value.unshift(tempObj)
          const temp = res.data.data.findIndex((item:any) => {
            return item.id === props.info['partner_id_b']
          })
          if (temp < 0) {
            const presentObj = { id: props.info['partner_id_b'], partner_name: props.info['party_b_name'] }
            partnerBList.value.push(presentObj)
          }
        }
      })
    }
    onMounted(() => {
      getPartnerAList()
      getPartnerBList()
    })
    return {
      formNode,
      ...toRefs(dataMap),
      partnerFormRules,
      onSubmit,
      close,
      subLoading,
      partnerAList,
      partnerBList,
      showPartner,
      onSubmitForm
    }
  }

el-select下拉框，選擇后賦值成功，但是框上不顯示選中的值的解決

最近在做項(xiàng)目時(shí)發(fā)現(xiàn)el-select下拉框，選擇后賦值成功，但是框上不顯示選中的值。

后來查了下官方文檔之后發(fā)現(xiàn)原因：

vue 無法監(jiān)聽動(dòng)態(tài)新增的屬性的變化，需要用 $set 來為這些屬性賦值。

如上圖所示，操作人下拉框初始沒有值，選擇了操作班組之后，根據(jù)所選的班組去獲取后臺(tái)數(shù)據(jù)填充操作人下拉框。

然后就發(fā)現(xiàn)了問題：選擇了操作人之后輸入框還是沒有值，但是綁定的@change事件currOperatorChange 打印出了選中的值。

解決方法：用 $set 來賦值

如下所示：

<el-row>
              <el-col :span="12">
                <el-form-item prop="deptId"
                              :label="$t('taskManage.lockTask.deptId')+':'">
                  <treeselect :placeholder="$t('taskManage.lockTask.selDeptId')"
                              :options="deptTree"
                              :normalizer="normalizer"
                              v-model="formData.deptId"
                              @select="selectDepart">
                  </treeselect>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="operateId"
                              :label="$t('taskManage.lockTask.table.operateName')+':'">
                  <el-select clearable
                             v-model="formData.operateId"
                             @change="currOperatorChange"
                             :placeholder="$t('taskManage.lockTask.selOperateName')">
                    <el-option v-for="item in operateOption"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

// 操作人選中項(xiàng)發(fā)生變化
    currOperatorChange(val) {
      console.log('操作人選中項(xiàng)發(fā)生變化', val)
      if (val) {
        let obj = {}
        obj = this.operateOption.find(item => {
          //這里的operateOption就是上面遍歷的數(shù)據(jù)源
          return item.value === val //篩選出匹配數(shù)據(jù)
        })
        this.$set(this.formData, this.formData.operateId, val.value)
        this.formData.operateName = obj.label
        console.log('修改操作人名稱', obj.label, obj.value)
      } else {
        this.formData.operateName = ''
        this.$set(this.formData, this.formData.operateId, '')
      }
    }