【VIDEO_Parent】-创作者前端-创作者列表

{
    path: '/',
    component: Layout,
    // redirect: '/dashboard',
    children: [{
      path: '/',
      name: '首页',
      component: () => import('@/views/dashboard/index'),
      meta: {title: '首页', icon: 'dashboard'}
    }]
  },
  {
    path: '/author',
    component: Layout,
    redirect: '/author/table',
    name: '创作者管理',
    meta: {title: '创作者管理', icon: 'el-icon-s-help'},
    children: [
      {
        path: 'table',
        name: '创作者列表',
        component: () => import('@/views/video/author/list'),
        meta: {title: '创作者列表', icon: 'table'}
      },
      {
        path: 'save',
        name: '添加创作者',
        component: () => import('@/views/video/author/save'),
        meta: {title: '添加创作者', icon: 'tree'}
      }
    ]
  },

import request from '@/utils/request'

export default {
  // 1.作者列表-分页查询
  getAuthorListPage(page, limit, authorQuery) {
    return request({
      // 路由参数拼接
      url: `/service_video/author/pageList/${page}/${limit}/`,
      method: 'post',
      // data 会自动转成 json 传递到接口当中
      data: authorQuery
    })
  }
}

// 引入 author.js 调用对应的请求方法
import author from '@/api/video/author/author';

export default {
  name: "list",
  // 定义变量与初始值
  data() {
    return {
      // 查询的结果集
      list: null,
      // 当前页
      page: 1,
      // 每页多少条记录
      limit: 10,
      // 总记录数
      total: 0,
      // 查询封装的对象
      authorQuery: {}
    }
  },
  // 自定义方法
  methods: {
    getAuthorList(page = 1) {
      this.page = page
      author.getAuthorListPage(this.page, this.limit, this.authorQuery)
        .then(resp => {
          // 处理请求成功
          console.log(resp);
        }).catch(error => {
        // 请求失败
      });
    }
  },
  // 页面渲染之前会自动调用此方法
  created() {
    this.getAuthorList();
  }
}

@CrossOrigin

<!--
表格
-->
<el-table
  :data="list"
  border
  fit
  highlight-current-row>
  <el-table-column label="序号" align="center"/>
  <el-table-column label="名称" align="center" prop="name"/>
  <el-table-column label="级别" align="center"/>
  <el-table-column label="创作者简介" align="center" prop="intro"/>
  <el-table-column label="添加时间" align="center" prop="gmtCreate"/>
  <el-table-column label="排序" align="center" prop="sort"/>
  <el-table-column label="操作" align="center">
    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
    <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
  </el-table-column>
</el-table>

<!-- 通过 slot 拿到表格当中绑定的数据 -->
<template slot-scope="scope">
  {{ scope.$index + 1 }}
</template>

<!-- 通过 slot 拿到表格当中绑定的数据 -->
<template slot-scope="scope">
  {{ scope.row.level === 1 ? "普通创作者" : "特约创作者" }}
</template>