web/src/component/PreviewTable.vue

72 lines
2.2 KiB
Vue
Raw Normal View History

2020-02-06 08:01:35 +00:00
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="封面">
<template slot-scope="scope">
<el-image :src="scope.row.picture" style="width: 100px; height: 100px">
2021-05-24 14:19:37 +00:00
<div slot="error" class="image-slot el-image__error">
2020-02-06 08:01:35 +00:00
暂无封面
</div>
</el-image>
</template>
</el-table-column>
2020-02-11 08:35:45 +00:00
<el-table-column label="歌曲">
2021-05-24 15:48:52 +00:00
<template #default="scope">
<span>{{ scope.row.title }}</span>
2020-02-06 08:01:35 +00:00
</template>
</el-table-column>
2020-02-11 08:35:45 +00:00
<el-table-column label="歌手">
2021-05-24 15:48:52 +00:00
<template #default="scope">
2020-02-06 08:01:35 +00:00
<p>{{ scope.row.artist }}</p>
</template>
</el-table-column>
2020-02-11 08:35:45 +00:00
<el-table-column label="专辑">
2021-05-24 15:48:52 +00:00
<template #default="scope">
2020-02-06 08:01:35 +00:00
<p>{{ scope.row.album }}</p>
</template>
</el-table-column>
<el-table-column label="操作">
2021-05-24 15:48:52 +00:00
<template #default="scope">
2021-05-24 14:19:37 +00:00
<el-button circle
icon="el-icon-video-play" type="success" @click="handlePlay(scope.$index, scope.row)">
2020-02-06 08:01:35 +00:00
</el-button>
2021-05-24 14:19:37 +00:00
<el-button circle
icon="el-icon-download" @click="handleDownload(scope.row)">
2020-02-06 08:01:35 +00:00
</el-button>
2021-05-24 14:19:37 +00:00
<el-button circle
icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">
2020-02-06 08:01:35 +00:00
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
2021-05-24 19:06:28 +00:00
import {RemoveBlobMusic} from '@/utils/utils'
2020-02-06 08:01:35 +00:00
2021-05-24 14:19:37 +00:00
export default {
name: "PreviewTable",
props: {
tableData: {type: Array, required: true},
2021-05-24 15:48:52 +00:00
policy: {type: Number, required: true}
2021-05-24 14:19:37 +00:00
},
2020-02-06 08:01:35 +00:00
2021-05-24 14:19:37 +00:00
methods: {
handlePlay(index, row) {
2021-05-24 15:48:52 +00:00
this.$emit("play", row.file);
2021-05-24 14:19:37 +00:00
},
handleDelete(index, row) {
RemoveBlobMusic(row);
this.tableData.splice(index, 1);
},
handleDownload(row) {
2021-05-24 19:06:28 +00:00
this.$emit("download", row)
2021-05-24 14:19:37 +00:00
},
2020-02-06 08:01:35 +00:00
}
2021-05-24 14:19:37 +00:00
}
2020-02-06 08:01:35 +00:00
</script>
<style scoped>
</style>