有些时候Select定制开发选择器需要多选、绑定对象，定制开发用户选择某项后（），定制开发得到的值是一个对象，定制开发得到对象后可以获取对定制开发象的某些属性，定制开发以便做进一步处理，定制开发数据提交入库后，定制开发进行编辑操作，定制开发此时根据需求可能还需要正确定回显之前新建时选择的多个列表项，下面对些功能实现做简单整理、解释。
1、Select选择器数据源数据结构如下
2、编写Select选择器模板代码
- <el-select v-model="formData.pipeline" multiple collapse-tags value-key="contractId" @change="val => handleSupplierChangeEvent('03', val,'pipeline')" @visible-change="val => handleSupplierVisibleChangeEvent(val, 'pipeline')">
- <el-option v-for="item in pipelineArr" :key="item.contractId" :label="item.supplierName" :value="item">
- <span style="float:left;margin-right:20px;">{{ item.supplierName }}</span>
- <span style="float:right;color: #909399;">{{ item.contractId }}</span>
- </el-option>
- </el-select>
上面代码解释如下：
(1) < v-for="item in pipelineArr" :key="item.contractId" :label="item.supplierName" :value="item">
遍历数据源（pipelineArr，即上图中数据），key的值这里使用的是contractId字段，为什么不使用supplierCode呢，因为supplierCode值有重复，如果使用supplierCode做为key的话，那么会出现这种情况，比如说用户选择了第8项“廊坊理琦科创管道技术有限公司-2324”，那么些时第9项也会呈现出被选中的状态，编辑回显时也会出现问题，所以这里key使用contractId（每项的contractId都是唯一的）；
lable绑定supplierName，显示中文名称；
value绑定item，item是数据中的每一个对象，这样就实现了绑定对象，当用户选择某项后，在Change事件中我们就可以获取到当前选中项对应的对象数据了， 即：
{
contractId: 1096,
enabled: "1",
showName: "廊坊市华油天成天然气销售有限公司-1096",
supplierCode: "0000100199",
supplierName: "廊坊市华油天成天然气销售有限公司"
}
注意：
option中的value绑定了对象后（item），那么在select中就需要使用value-key了，这里value-key 的值和option中key的值需要相同。
在select中还使用了multiple和collapse-tags属性，实现了多选功能。
在浏览器中效果如下：
3、回显处理
正常情况下，编辑数据时需要回显出之前用户在下拉框选择的多个数据项，下面对此进行处理。
select中绑定的是formData.pipeline，下面是formData.pipeline的数据结构：
回显时需要给formData.pipeline赋值，formData.pipeline是一个数组，将接口返回的多个对象存放到此数组中，即可实现正确回显。
注意：
option中value绑定的是item（数据源中的某项，对象结构），结构如下：
{
contractId: 1096,
enabled: "1",
showName: "廊坊市华油天成天然气销售有限公司-1096",
supplierCode: "0000100199",
supplierName: "廊坊市华油天成天然气销售有限公司"
}
那么回显时向formData.pipeline数组中存放的数据也应该是这个结构的对象，实现上只需要向formData.pipeline中存放下面的结构也能实现正确的回显：
{
contractId: 1096,
supplierCode: "0000100199",
supplierName: "廊坊市华油天成天然气销售有限公司"
}
因为在select optiton中的value-key、key、lable中只用到了contractId、supplierCode、supplierName三个字段，所以对象中只包含他们三个就可以实现正确回显了。
下面是实现回显的js代码：
浏览器中的回显效果如下：
至此，本文已经讲解完毕Select选择器多选、绑定对象、回显的代码实现。