vue在使用element时使用video视频地址切换视频动态改变
vue在使用element时使用video视频地址切换视频动态改变今天用vue在写element的table时,在table中使用video动态渲染,但是渲染上的视频地址修改后,发现之前的视频还在,而地址以改变视频没有渲染。下边是我的解决方式:在后台传来的数据的时候,把值切换data(){return{tableData:[],}},后台传来的接口数据showdata(){this.$axios.
·
vue在使用element时使用video视频地址切换视频动态改变
今天用vue在写element的table时,在table中使用video动态渲染,但是渲染上的视频地址修改后,发现之前的视频还在,而地址以改变视频没有渲染。
下边是我的解决方式:
在后台传来的数据的时候,把值切换
data(){
return{
tableData:[],
}
},
后台传来的接口数据
showdata(){
this.$axios.get('/api/videoClip/xxx/xxx',{
params: {
pageNum:this.pageNum,
pageSize:this.pageSize,
markedType:this.radio
},
}).then(res=>{
if(res.data.data){
for(let i=0;i<res.data.data.list.length;i++){
// 这里编辑你的样式或者数据,其他也可以编辑
res.data.data.list[i].netUrl="<video controls width='200' height='80'><source src="+res.data.data.list[i].netUrl+" type='video/mp4'></video>"
}
this.tableData=res.data.data.list;
this.total=res.data.data.total;
}
}).catch(error => {
console.error(error)
});
},
element的table的使用
<el-table :data="tableData" border style="width: 70%" stripe>
<el-table-column label="详情" align="center" >
<template slot-scope="scope">
<div v-html=scope.row.netUrl> </div>
</template>
</el-table-column>
</el-table>
视频效果(这时编辑或者删除,里面的数据就会动态改变,视频也会改变)
更多推荐
已为社区贡献3条内容
所有评论(0)