el-table 嵌套 el-select

数据格式

{
    "code": 200,
    "message": "成功",
    "data": {
        "taskList": [{
            "taskId": 17,
            "taskModelPath": null,
            "userId": 1,
            "word": "测试一下",
            "taskStatus": 1,
            "recordFileNameArray": "[\"1_11_17_record1.wav\",\"1_11_17_record2.wav\",\"1_11_17_record3.wav\",\"1_11_17_record4.wav\",\"1_11_17_record5.wav\",\"1_11_17_record6.wav\",\"1_11_17_record7.wav\",\"1_11_17_record8.wav\",\"1_11_17_record9.wav\"]",
            "recordFilePath": "http://地址/record//",
            "unqualifiedReason": null,
            "taskCreateTime": "2020-09-23 03:17:44",
            "taskOngoingTime": null,
            "taskCompleteTime": null
        }, {
            "taskId": 18,
            "taskModelPath": null,
            "userId": 1,
            "word": "巴拉巴拉",
            "taskStatus": 1,
            "recordFileNameArray": "[\"1_14_26_record1.wav\",\"1_14_26_record2.wav\",\"1_14_26_record3.wav\",\"1_14_26_record4.wav\",\"1_14_26_record5.wav\",\"1_14_26_record6.wav\",\"1_14_26_record7.wav\",\"1_14_26_record8.wav\",\"1_14_26_record9.wav\"]",
            "recordFilePath": "http://地址/record//",
            "unqualifiedReason": null,
            "taskCreateTime": "2020-09-23 06:26:33",
            "taskOngoingTime": null,
            "taskCompleteTime": null
        }],
        "total": 2
    }
}

效果

image.png
需求
recordFileNameArray参数中返回可选择的录音名，recordFilePath参数中返回地址
在el-select中选择不同的录音名，点击播放按钮拼接地址和录音名，使用Audio播放录音
遇到问题

el-select的v-model为选中的内容，而列表中每一行都是不一样的，所以要在参数列表中新增元素用于指定该行选中的内容

then(response => {
            let data = JSON.parse(JSON.stringify(response.data)).data
            this.list = data.taskList
            // 遍历列表,新增 audioName 参数指向当前选中的值
            for (var i = 0; i < this.list.length; i++) {
              this.list[i].audioName = this.getRecordList(this.list[i].recordFileNameArray)[0];
            }

            this.totalPage = data.total
})


<el-table-column label="录音" align="center">
  <template slot-scope="scope">
<!-- 使用 scope.row.audioName 作为model -->
    <el-select v-model="scope.row.audioName" placeholder="请选择">
      <el-option
        v-for="(item) in getRecordList(scope.row.recordFileNameArray)"
        :key="item"
        :value="item">
      </el-option>
    </el-select>
    <el-button size="mini" @click="handlePlayAudio(scope.row)">播放</el-button>
  </template>
</el-table-column>

类似 el-select 等表单元素绑定了类似 a.b 之类的属性，而不是直接的一级属性的话，当这个属性发生更改的时候，它的显示效果可能不会动态地进行更新，这个时候需要使用 Vue.$set 来进行更改 - https://www.cnblogs.com/wbyixx/p/12024643.html

<el-table-column label="录音" align="center">
  <template slot-scope="scope">
    <!-- 更新 scope.row.audioName 的值为它自身-->
    <el-select v-model="scope.row.audioName" placeholder="请选择" @change="$set(list,scope.row.audioName,scope.row.audioName)">
      <el-option
        v-for="(item) in getRecordList(scope.row.recordFileNameArray)"
        :key="item"
        :value="item">
      </el-option>
    </el-select>
    <el-button size="mini" @click="handlePlayAudio(scope.row)">播放</el-button>
  </template>
</el-table-column>

实现
html

<el-table-column label="录音" align="center">
  <template slot-scope="scope">
    <el-select v-model="scope.row.audioName" placeholder="请选择" @change="$set(list,scope.row.audioName,scope.row.audioName)">
      <el-option
        v-for="(item) in getRecordList(scope.row.recordFileNameArray)"
        :key="item"
        :value="item">
      </el-option>
    </el-select>
    <el-button size="mini" @click="handlePlayAudio(scope.row)">播放</el-button>
  </template>
</el-table-column>

script
请求数据

getList () {
  this.$axios.post(this.HOST + 'task/getAllTaskList', {
    limit: this.listQuery.pageSize,
    page: this.listQuery.pageNum
  })
    .then(response => {
      let data = JSON.parse(JSON.stringify(response.data)).data
      this.list = data.taskList

      for (var i = 0; i < this.list.length; i++) {
        this.list[i].audioName = this.getRecordList(this.list[i].recordFileNameArray)[0];
      }

      this.totalPage = data.total
    }).catch(error => {
  }).finally(() => {
    this.listLoading = false
  })
},

格式化recordFileNameArray参数

getRecordList (recordFileNameArray) {
  return JSON.parse(recordFileNameArray)
},