el-table显示视频
时间: 2023-11-07 15:53:03 浏览: 38
El-Table 是一个基于 ElementUI 组件库的表格组件,它可以方便地实现表格数据的展示和编辑。如果你想在表格中展示视频,你可以在表格的某一列中使用自定义模板来实现。
以下是一个简单的示例,演示如何在 El-Table 中展示视频:
```vue
<template>
<div>
<el-table :data="tableData">
<el-table-column label="视频">
<template slot-scope="scope">
<video :src="scope.row.videoUrl" width="200" height="150" controls></video>
</template>
</el-table-column>
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column prop="author" label="作者"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
title: '视频1',
author: '作者1',
videoUrl: 'http://example.com/video1.mp4'
},
{
title: '视频2',
author: '作者2',
videoUrl: 'http://example.com/video2.mp4'
}
]
}
}
}
</script>
```
在这个示例中,我们在 El-Table 中使用了一个自定义模板来展示视频。我们在表格中添加了一个列,列的 label 是 “视频”,我们在这一列中使用了一个自定义模板,模板的内容是一个 video 标签,它的 source 属性指向了每行数据中的 videoUrl 属性,这样就可以在表格中展示视频了。同时,我们还添加了两个普通列,分别是 “标题” 和 “作者”。
希望这个示例可以帮助你在 El-Table 中展示视频。