起因

 原本并不需要考虑这种形式，但是无奈后端提供的接口数据并没有描述相关的配置项。
需求是在一个form中的select被选择后（具体数据是一个IP地址），以popover的形式显示包含这个IP地址的对象的全部信息。众所周知，select中的option备选项是一个数组，比如我在created()阶段收到的数组元素之一如下：

  {
    host_name: "第一台测试服务器",
    host_type: 0,
    id: 1,
    location: "香港",
    private_ip: "10.78.100.5",
    public_ip: "100.100.100.100:9527"
  }

处理选择

 那么很显然，在option标签中，使用v-for取出item就可以渲染出这些备选项，而select组件已经为我们绑定了表单数据，在之前定义的:value=“item.public_ip”就代表填充到表单里的值,是我要的IP地址。
 但是数据预览的需求是，不仅要看到IP地址，还要看到host_name、host_type、id这些json数组对象中的其他信息，
 可是并没有提供映射的配置信息，所以我···用到了： :value=“item” 可是这里要注意，此时的item是一个对象，那么在外层的select中，要添加这个属性 value-key=“public_ip” 值应该是item对象里的唯一值，不然你连编译都别想过~

 那么现在点击了选项后，select会把数据绑定在我定义的中间变量里 selected_center_or_edge_hosts  本来这个变量应该是直接在form表单变量中的数组就可以了，但是为了存下所有的item信息，并且提交表单的时候，
后端哥也懒得处理解析json中的IP地址—总之就是让我多解析一步都不行···
 于是就想了一个折中的这个变量，选中的所有值都给它给它给它！
 所以我绑定了一个方法，当选择的值发生变化，就会执行里面的动作：
1、先给select绑定方法，传递事件： @change=“change_selected_center_or_edge_hosts($event)”
2、之后定义执行动作：

change_selected_center_or_edge_hosts(e) {
      this.form.center_or_edge_hosts = this.selected_center_or_edge_hosts.map(x => { return x.public_ip }) // 生成数组
    }

这里就很明显了，我把选中的item数组中的public_ip取出来，赋值给了form表单里的原本该传的数组。

处理预览

 至于预览，在select外层包裹一个popover + table的组件就可以了，但是这样的话一定要记得在select上添加这个属性： slot=“reference” 不然你别想再看到你的select选择器了！

提交请求后的清空处理

 当执行了onSubmit之后，正常只要将this.form置空就行了，但是由于有selected_center_or_edge_hosts的存在，
 所以我们也要将它置空，而这个需求其实还会要求当一个form中的radio-group切换时，这个select的备选选项数组也要变，所以在切换radio的时候，它的change方法里，也要置空selected_center_or_edge_hosts，不然你休想提交正确的信息了！

vue代码

<el-form-item
        label="填坑的文本标题"
        prop="center_or_edge_hosts"
      >
        <el-popover
          placement="top-start"
          trigger="hover"
          width="800"
        >
          <el-table :data="selected_center_or_edge_hosts">
            <el-table-column
              width="50"
              property="id"
              label="id"
            />
            ...
            ...多个el-table-column
            ...
          </el-table>
          <el-select
            slot="reference"
            v-model="selected_center_or_edge_hosts"
            multiple
            placeholder="可多选"
            value-key="public_ip"
            style="width: 100%;"
            @change="change_selected_center_or_edge_hosts($event)"
          >
            <div v-if="form.room_directing_host_type === 0">
              <el-option
                v-for="item in center_hosts"
                :key="item.public_ip"
                :label="item.public_ip"
                :value="item"
              />
            </div>
            <div v-else>
              <el-option
                v-for="item in edge_hosts"
                :key="item.public_ip"
                :label="item.public_ip"
                :value="item"
              />
            </div>
          </el-select>
        </el-popover>
      </el-form-item>

总结

 其实只是一个小小的select-option要取的值是备选数组中的一个json的小问题，如果我直接发送这个数据，后端做解析是很容易的，但是因为后端没有处理，那我只好自己想办法啦。
 当然如果在页面初始化的时候，给我一个动态返回的IP地址和其他信息的映射关系，我也不需要将耦合度如此之高的数据类型搞来搞去，所以要自寻解决办法~
 遇事不决，量子力学！