有些时候Select选择器需要多选、绑定对象，用户选择某项后（change事件），得到的值是一个对象，得到对象后可以获取对象的某些属性，以便做进一步处理，数据提交入库后，进行编辑操作，此时根据需求可能还需要正确定回显之前新建时选择的多个列表项，下面对些功能实现做简单整理、解释。

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) <el-option 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选择器多选、绑定对象、回显的代码实现。