1. html 結(jié)構(gòu)

<el-form :model="conditionForm"
   ref="conditionForm"
   label-width="100px" class="demo-ruleForm">
 	<el-select
         v-model="conditionForm.personnel"
         multiple
         placeholder="Select"
         style="width: 240px"
       >
        <el-option
          v-for="item in arr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
    </el-select>
</el-form>

2. js 代碼

<script setup>
import { reactive } from 'vue';
let conditionForm = reactive({
  personnel: [], // 人員
})
let arr = reactive([
  {
    label: '測試',
    value: '1'
  },
  {
    label: '測試1',
    value: '2'
  }
])
</script>

3. 點(diǎn)擊下拉選項，輸入框無法選中
   
4. 原因：ref=“conditionForm” 和 :model=“conditionForm” 沖突了，
   4-1. 再Vue2里面
   :model=“conditionForm” 綁定的是 conditionForm 變量，
   ref=“conditionForm” 綁定的是conditionForm字符串
   v-model=“conditionForm.personnel” 綁定的 conditionForm 變量下屬性 personnel

4-2 再Vue3里面
:model=“conditionForm” 綁定的是 conditionForm 變量，
ref=“conditionForm” 綁定的是conditionForm 變量
v-model=“conditionForm.personnel” 綁定的 conditionForm變量下的personnel屬性
再選中項時候，我們是把選中的值 賦給 conditionForm.personnel 屬性 ，因為這里form 和ref 都綁定了 conditionForm，vue3 底層再回寫的時候 ，調(diào)用conditionForm變量時， 到底指的是 form表單 還是指的 ref 呢？ 系統(tǒng)無法判斷，所以也無法賦值文章來源地址http://www.zghlxwxcb.cn/news/detail-426513.html

5. 解決方案： ref 和 v-model 綁定，變量名錯開使用 ,
   ref =“conditionForm1”, v-model=“conditionForm.personnel”

<el-form :model="conditionForm"
       ref="conditionForm1"
       label-width="100px" class="demo-ruleForm">
       <el-select
          v-model="conditionForm.personnel"
          multiple
          placeholder="Select"
          style="width: 240px"
        >
        <el-option
          @change="personnelChange"
          v-for="item in arr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
    </el-select>
</el-form>

6. 總結(jié)
   6-1 不要把Vue2 form表單的綁定數(shù)據(jù)的思維，想當(dāng)然的用在Vue3中
   6-2 再Vue3 中 ref 綁定 和 v-model 綁定 都是綁定的變量 ，同時使用時，使用不同的命名錯開，避免下拉框無法賦值

到了這里，關(guān)于Vue3 element-plus el-select 無法選中，又不報錯的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！