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

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline size="mini">
      <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="当前状态：">
        <el-select placeholder="请选择当前状态">
          <el-option />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button icon="el-icon-refresh">重置</el-button>
        <el-button type="primary" plain icon="el-icon-plus" @click="getDetail()">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table>
      <el-table-column label="ID" align="center" />
      <el-table-column label="歌单名称" align="center" />
      <el-table-column label="歌单封面" align="center"></el-table-column>
      <el-table-column label="歌单创建者" align="center" />
      <el-table-column label="创建者头像" align="center"></el-table-column>
      <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="text">编辑</el-button>
          <el-button type="text">上架</el-button>
          <el-button type="text">下架</el-button>
          <el-button type="delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  methods: {
    // 新增 / 查看 / 编辑
    getDetail(id) {
      this.$router.push({
        path: `/music/menu/detail`,
        query: {
          id: id,
        },
      })
    }
  },
};
</script>