vue中表格中每行都嵌入下拉选择（多选）的处理

<el-table-column label="分组选项" prop="job_id">
  <template slot-scope="scope">
    <el-select v-model="selectTypeValue[scope.row.ipaddr]"
      @change="handleSelect(scope.$index,scope.row)" size="small" multiple placeholder="请选择">
      <el-option
        v-for="item in jobs"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
  </template>
</el-table-column>

JS代码如下：

export default {
  name: 'Manager',
  data () {
    return {
      machines: [],
      jobs: [],
      'selectTypeValue': {},
      'search': ''
    }
  },
  // 忽略。。。。

通过API把数据GET下来，数据格式如下：

[
    {
        "id": 1,
        "ipaddr": "192.168.1.1",
        "job_id": [
            1
        ]
    },
    {
        "id": 4,
        "ipaddr": "192.168.1.2",
        "job_id": [
            2
        ]
    }
]

之后，会把select选择数据填充到this.selectTypeValue中，结构如下：

selectTypeValue = [
    {
        "x.x.x.1": [1,2,3]
    },
    {
        "x.x.x.2": [1,2]
    }
]

el-select的v-model绑定到selectTypeValue[scope.row.ipaddr]中，在el-select中绑定change事件函数handleSelect ，函数代码如下：

    handleSelect (index, row) {
      this.selectTypeValue = {...this.selectTypeValue}
    }

这样就实现了在el-table中，每行都绑定自己的el-select

参考：
https://www.cnblogs.com/rabbit-lin0903/p/12986098.html