獲取 el-select 的 value 和 label 值??

在 Element UI 的 el-select 組件中，可以通過以下方法獲取選項的 value 和 label 值。

1、綁定 v-model 獲取 value

el-select 通常通過 v-model 綁定 value 值，直接訪問綁定的變量即可獲取當前選中的 value。

 <el-selectv-model="company"@change="companyChange"clearablefilterablereserve-keywordstyle="width: 300px"><el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"> </el-option></el-select>

通過 change 事件獲取 label

const list = ref([ { id: '1', name: '選項1' },{ id: '2', name: '選項2' }
])const companyChange=(value:string)=> {console.log(value); // 輸出當前選中的 valuevar name = list.value.filter(item=>ite.id === value)[0].name //  輸出當前選中的label}

select 初始化

const initSelect=()=>{// id 為需要選中的選項idcompany.value = id
}

2、使用 value-key 獲取整個對象

如果選項數據是對象而非簡單值，可以設置 value-key 綁定整個對象。

  <el-selectv-model="company"clearablefilterable@change="changeCompany"style="width: 300px"><el-option v-for="item in mTenantList" :key="item.tenantId" :label="item.enterpriseName" :value="{value:item.tenantId,label:item.enterpriseName}"> </el-option> </el-select>

const list = ref([ { id: '1', name: '選項1' },{ id: '2', name: '選項2' }
])const companyChange=(value:string,label:string)=> {console.log(value); // 輸出當前選中的 valueconsole.log(label); // 輸出當前選中的 value}

這里發現初始化問題！無法設置selelct 選中！