el-table显示视频
时间: 2023-11-07 13:53:03 浏览: 35
可以使用 element-plus 的 el-image 组件来显示视频。以下是一个示例代码:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column prop="videoUrl" label="视频">
<template #default="{ row }">
<el-image :src="row.videoUrl" fit="contain"></el-image>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
title: '视频1',
videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4'
},
{
title: '视频2',
videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4'
}
]
}
}
}
</script>
```
在上面的代码中,我们使用了 el-image 组件来显示视频。我们将视频的 URL 作为 el-image 组件的 src 属性,同时设置 fit 属性为 contain,使视频自适应父容器大小。在 el-table-column 中使用 template 标签,可以自定义表格列中的内容。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)