element UI el-select 绑定值为对象时设置默认值

适用场景描述：在项目中实现编辑功能时，如页面存在下拉框且下拉框的数据在点击相应的select时进行调用（ 在编辑时可能需要修改部分数据，而且存在部分下拉数据并不是必选项，如果直接获取所有的下拉数据，可能会造成浪费 ），需要在下拉框内显示已有的值作为默认值，如图所示（以官网给的数据为例）：

绑定值为字符串：
如果只是需要数据的单个值，例如：value时，直接把值绑定给value就可以。
代码：
页面代码：

<el-select v-model="value" placeholder="请选择" @change="getItem(value,'radio')">
	<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
	</el-option>
</el-select>

js：

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '选项1'
      }
    },
    methods:{
      getItem(obj, type) {
		console.log(obj);
		console.log(type);
	  },
    }
  }
</script>

以上代码只是最简单的实现方式，但是项目中往往会遇到下拉选中的数据需要的不止其一个属性，这时候需要拿到整个对象才能实现。

绑定值为对象：
添加value-key作为唯一性标识，把value绑定的值改为整个对象。
思路：绑定单个属性时，设置默认值可以在options（下拉框数据集合）值为空的情况下实现，但是绑定值为对象，如果需要在不请求接口获取下拉集合的情况下设置默认值的话，则无法正常显示，此时只需要把已获取的默认值整合为一个对象放在options的集合内即可实现对象的默认值，在点击下拉框时再请求接口数据进行下拉框数据集合的重新赋值，具体实现如下所示：

<el-select v-model="value1" placeholder="请选择" value-key="value" @change="getItem(value1,'checkbox')">
	<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">
	</el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }],
		value1: {
			value: '选项1',
			label: '黄金糕'
		}
      }
    },
    methods:{
      getItem(obj, type) {
		console.log(obj);
		console.log(type);
	  },
    }
  }
</script>