element-ui el-table请求数据的问题

Question

element的table怎样根据每一行的id去请求数据呢 我需要根据每一行的id获取这行的数据然后赋值给el-select的options 貌似没有找到相关的方法这么做
<el-table

  :data="detailList" 
  style="width: 100%" 
  header-row-class-name="blackTableHeader">
  <el-table-column prop="index" label="序号"  align="center">
      <template slot-scope="scope">
          {{scope.$index+1}} 
    </template>
  </el-table-column>
  <el-table-column prop="name" label="人员"  align="center"></el-table-column>
  <el-table-column prop="position" label="备勤职务" align="center" :formatter="getData">
      <template slot-scope="scope">
      // 根据每一行的id请求下拉框的数据
      <el-select v-model="selectedPosition" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
  </el-table-column>
  <el-table-column prop="operation" label="操作" align="center">
      <template slot-scope="scope">
      <span class="delete">删除</span>
    </template>
  </el-table-column>
</el-table>

Answer 1

1、不建议通过id逐个获取用户信息，发的请求多会卡死

解决方案：拿到页面上所有用户的id（idList）,调取后端接口拿到页面上所有用户的信息，然后自己组装成json对象，代码大概如下：

export default {
  name: '',
  props: {},
  data(){
    return {
      userList: [], // 所有的用户
      allUserInfo: {}, // 对象
    }
  },
  created(){
     // 获取用户列表
  },
  methods: {
    getUserList(){
         this.$http.get().then(res => {
            this.userList = res.voList; // voList后台返回的字段，也可能是其他字段
            
            // 获取用户信息
            this.getUserInfo( res.voList.map(user => user.id) );
         })
    },
    getUserInfo(idList){
        this.$http.get().then(res => {
            if(res.success){
                this.allUserInfo = res.voList.reduce( (userInfo, item) => {
                   userInfo[item[0].userId] = item; // 此处取决于返回的数据格式  
                   return userInfo;
                }, {});
            }
        })
    }
  },
};

模板里面就可以这么写了：

<template slot-scope="scope">
  <el-select v-model="selectedPosition" placeholder="请选择">
    <el-option
      v-for="item in allUserInfo[scope.row.id]"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

Answer 2

写一个 method

<template slot-scope="scope">
      // 根据每一行的id请求下拉框的数据
  <el-select v-model="selectedPosition" placeholder="请选择">
    <el-option
      v-for="item in getOptionsById(scope.row.id)"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

getOptionsById(id) {}