ohplay_system/src/views/music/menu/detail.vue

<template>
  <div class="app-container">
    <el-form label-width="100px">
      <el-form-item label="歌单名称：">
        <el-input placeholder="请输入歌单名称" />
      </el-form-item>
      <el-form-item label="歌单介绍：">
        <el-input type="textarea" rows="5" placeholder="请输入歌单介绍" />
      </el-form-item>
      <el-form-item label="歌单创建者：">
        <el-input placeholder="请输入歌单创建者名称" />
      </el-form-item>
      <el-form-item label="资源平台：">
        <el-select placeholder="请选择资源平台">
          <el-option />
        </el-select>
      </el-form-item>
      <el-form-item label="歌单封面：">
        <Upload listType="picture-card" />
      </el-form-item>
      <el-form-item label="创建者头像：">
        <Upload listType="picture-card" />
      </el-form-item>
      <el-form-item label="歌曲列表：" style="width: 1000px">
        <el-button type="primary" icon="el-icon-plus">添加歌曲</el-button>
        <!-- 列表 -->
        <el-table>
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column label="ID" align="center" />
          <el-table-column label="歌曲名称" align="center" />
          <el-table-column label="歌手名称" align="center" />
          <el-table-column label="播放时长" align="center" />
          <el-table-column label="当前状态" align="center" />
          <el-table-column label="操作" align="center">
            <template>
              <el-button type="text">试听</el-button>
              <el-button type="delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
import Upload from '@/components/Upload/index.vue'
export default {
  components: {
    Upload
  },
  data() {
    return {

    }
  },
  methods: {
    cancel() {
      this.$tab.closeOpenPage("/music/menu");
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  width: 500px;
}

.form-btn {
  margin-top: 20px;
}
</style>