快捷導(dǎo)航

el-select如何獲取當(dāng)前選中的對(duì)象所有(item)數(shù)據(jù)

更新時(shí)間：2023年11月24日 08:59:08 作者：楚楚夢(mèng)廈

在開發(fā)業(yè)務(wù)場(chǎng)景中我們通常遇到一些奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取當(dāng)前選中的對(duì)象所有(item)數(shù)據(jù)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

場(chǎng)景

在應(yīng)用elementUI的el-select下拉框的時(shí)候，界面展示只需要文案就足夠了， 但我們傳參給后端可能需要多個(gè)字段 ,如有以下后端接口返回?cái)?shù)據(jù):

const optionsList = [
	{
		name: '',
		id: '',
		class_name:'',
		class_type: '',
		english_name: '',
		is_default: false,
		online_worker_count: 0,
		time: "2022-12-26 16:30:21",
	}
	...
]

即需要獲取當(dāng)前選擇的name對(duì)應(yīng)的對(duì)象的所有數(shù)據(jù)

實(shí)現(xiàn)

使用element官方的屬性：

value-key 作為 value 唯一標(biāo)識(shí)的鍵名，綁定值為對(duì)象類型時(shí)必填

<el-form-item v-for="(workerItem, index) in form.data.worker_groups" :key="'workerGroups_'+ index"
                          style="margin-top: 10px">
	<el-select v-model="form.data.worker_groups[index]" value-key="name" filterable clearable placeholder="請(qǐng)選擇">
		<el-option
		   v-for="item in data.workerGroups"
		     :key="item.id"
		     :label="item.name"
		     :value="item">
		 </el-option>
	</el-select>
</el-form-item>

注意點(diǎn)

el-select的v-model綁定當(dāng)前的對(duì)象
不能直接綁定workerItem會(huì)報(bào)錯(cuò)，使用form.data.worker_groups[index] 索引獲取當(dāng)前對(duì)象。
el-option的value綁定最后我們想獲取的當(dāng)前對(duì)象
value-key的值可以和label對(duì)應(yīng)

附：el-select獲取點(diǎn)擊項(xiàng)的整個(gè)對(duì)象item

<template>
  <!--v-model綁定一個(gè)對(duì)象值，指定value-key標(biāo)識(shí)-->
  <el-select v-model="obj" value-key="id" @change="change" placeholder="請(qǐng)選擇">
    <el-option
        v-for="(item,index) in options"
        :key="index"
        :label="item.name"
        <!--綁定整個(gè)對(duì)象item-->
        :value="item">
      {{ item.name }}
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      options: [{
        id: 1,
        name: '黃金糕'
      }, {
        id: 2,
        name: '雙皮奶'
      }, {
        id: 3,
        name: '蚵仔煎'
      }, {
        id: 4,
        name: '龍須面'
      }, {
        id: 5,
        name: '北京烤鴨'
      }],
      obj: {}
    }
  },
  methods: {
    change(item) {
      console.log(item);// 打印整個(gè)對(duì)象
    }
  }
}
</script>

總結(jié)

到此這篇關(guān)于el-select如何獲取當(dāng)前選中的對(duì)象所有(item)數(shù)據(jù)的文章就介紹到這了,更多相關(guān)el-select獲取對(duì)象所有數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！