html select嵌入table,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

})

v-for="(item) in getRecordList(scope.row.recordFileNameArray)"

:key="item"

:value="item">

播放

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

v-for="(item) in getRecordList(scope.row.recordFileNameArray)"

:key="item"

:value="item">

播放

实现

html

v-for="(item) in getRecordList(scope.row.recordFileNameArray)"

:key="item"

:value="item">

播放

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)

},