如何在Vue的<b-table>中创建按行独立的下拉框并保存每行选中值

问题根因 #

你当前所有行的下拉框都绑定了全局的同一个selectedSerial变量，所以任意一行修改值都会同步更新到所有下拉框。

解决方案 #

核心思路是将下拉框的选中值绑定到当前行对应的独立字段上，推荐直接存储在userIdArr的每一项对象内，管理更方便。

步骤1：初始化行数据时新增选中值字段 #

获取userIdArr数据时，给每一项新增selectedSerial字段存储当前行下拉框的选中值，保证响应式：

// 假设是接口请求返回userIdArr的场景
async fetchUserList() {
  const res = await request('/xxx')
  this.userIdArr = res.data.map(item => {
    // 给每行新增独立的选中值字段，初始值可自定义
    return { ...item, selectedSerial: '' }
  })
}
// 如果是Vue2且不方便解构赋值的话，也可以用$set添加响应式属性：
// this.userIdArr = res.data
// this.userIdArr.forEach(item => {
//   this.$set(item, 'selectedSerial', '')
// })

原来定义的全局变量selectedSerial: []已经没用了，可以直接删除。

步骤2：修改模板中的v-model绑定 #

将下拉框的v-model从全局变量改成绑定当前行的selectedSerial字段：

<b-row v-if="userIdArr.length >0 && incidentIdArr.length ===0" class="mt-5">
  <b-col md="10" offset-md="1">
    <b-table overflow="auto" hover border :items="userIdArr" :fields="userArrTblfields">
      <template slot="serialDropdown" slot-scope="row">
        <!-- 绑定当前行的独立字段 -->
        <b-form-select v-model="row.item.selectedSerial" :options="serialOptions"></b-form-select>
      </template> 
    </b-table>
  </b-col>
</b-row>

步骤3：收集所有行的选中值 #

后续需要提交数据时，直接遍历userIdArr即可获取每行的选中值：

// 示例：获取所有行的id和对应选中的serial
const submitData = this.userIdArr.map(item => {
  return {
    userId: item.id,
    selectedSerial: item.selectedSerial
  }
})

内容的提问来源于stack exchange，提问作者Paradox334