el-table显示视频
时间: 2023-11-07 11:53:03 浏览: 62
el-table-infinite-scroll:El-Table无限滚动
5星 · 资源好评率100%
可以使用 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 标签,可以自定义表格列中的内容。
阅读全文