el-table 嵌套 el-select

數(shù)據(jù)格式

{
    "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參數(shù)中返回可選擇的錄音名婆硬，recordFilePath參數(shù)中返回地址
在el-select中選擇不同的錄音名，點擊播放按鈕拼接地址和錄音名查吊，使用Audio播放錄音
遇到問題

el-select的v-model為選中的內(nèi)容逻卖，而列表中每一行都是不一樣的虚茶，所以要在參數(shù)列表中新增元素用于指定該行選中的內(nèi)容

then(response => {
            let data = JSON.parse(JSON.stringify(response.data)).data
            this.list = data.taskList
            // 遍歷列表,新增 audioName 參數(shù)指向當(dāng)前選中的值
            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 之類的屬性婆殿，而不是直接的一級屬性的話婆芦，當(dāng)這個屬性發(fā)生更改的時候，它的顯示效果可能不會動態(tài)地進(jìn)行更新肠鲫，這個時候需要使用 Vue.$set 來進(jìn)行更改 - 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>

實現(xiàn)
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
請求數(shù)據(jù)

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參數(shù)

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者