el-select如何同时获取value和label？

在使用ElementUI组件库的el-select组件时，默认只能获取到下拉框的value值，而根据业务的不同需求，我们大多数都需要获取下拉框里面的label值，一并发送给后端。在这里提供两种获取label的方式：

方法一（懒方法，很实用）：

在给el-option绑定:value值时使用对象的方式，将value和label同时绑定到:value上面。

 :value="{ value: item.key, label: item.value }"

  <template>
	<el-form ref="formValue" :model="formValue" >
		<el-form-item label="开户银行：" prop="bankCode">
		  <el-select
		    v-model="formValue.bankCodeName"
		    placeholder="请选择"
		    @change="selectBank"
		    filterable
		    clearable
		  >
		    <el-option  // 循环的是一个数组，item为对象
		      v-for="item in bankList"
		      :key="item.key"
		      :label="item.value"
		      :value="{ value: item.key, label: item.value }"  // 划重点
		    />
		  </el-select>
		</el-form-item>
	</el-form>
  </template>
  
  export default {
	data() {
	  return {
	    formValue: {
	      bankCode: '',
	      bankCodeName: '',
	    },
	    bankList:[
	      {"key": "01000000", "value": "中国邮政储蓄银行" },
	      {"key": "01020000", "value": "中国工商银行" },
	    ]
	  };
	},
	methods: {
	  // 选择开户银行
	  selectBank(data) {  // data为el-option上:value绑定的对象
	    // 将data对象解构
	    const { value, label } = data;
	    // 对formValue中的银行code和银行名称重新赋值
	    this.formValue.bankCode = value;     // 01020000
	    this.formValue.bankCodeName = label; // 中国工商银行
	  },
	}
  }

方法二：
获取bankCode值之后，对下拉列表数组进行循环判断，当选择的bankCode值与列表中对象的key相同时，获取当前对象的value值。

  <template>
	<el-form ref="formValue" :model="formValue" >
		<el-form-item label="开户银行：" prop="bankCode">
		  <el-select
		    v-model="formValue.bankCodeName"
		    placeholder="请选择"
		    @change="selectBank"
		    filterable
		    clearable
		  >
		    <el-option  // 循环的是一个数组，item为对象
		      v-for="item in bankList"
		      :key="item.key"
		      :label="item.value"
		      :value="item.key"   // 划重点
		    />
		  </el-select>
		</el-form-item>
	</el-form>
  </template>

  export default {
	data() {
	  return {
	    formValue: {
	      bankCode: '',
	      bankCodeName: '',
	    },
	    bankList:[
	      {"key": "01000000", "value": "中国邮政储蓄银行" },
	      {"key": "01020000", "value": "中国工商银行" },
	    ]
	  };
	},
	methods: {
	  // 选择开户银行
	  selectBank(value) {
	    // 1、使用循环方式获取bankCodeName
	    this.bankList.forEach(item=>{
	      if(item.key === value){
	      	this.formValue.bankCodeName = item.value;	// 中国工商银行
	      }
	    })
	    // 2、使用数组的find方法获取bankCodeName
	    // 数组实例的find方法用于找出第一个符合条件的数组成员
	    const bankObj =  this.bankList.find(item => item.key === value);
	    this.formValue.bankCodeName = bankObj.value;	// 中国工商银行
	  }
	}
  }