20-Vue实战项目：电商管理系统（Element-UI）-角色列表

最新推荐文章于 2021-09-19 13:58:36 发布

suzaizai

最新推荐文章于 2021-09-19 13:58:36 发布

阅读量442

点赞数

分类专栏： 20-Vue实战项目：电商管理系统（Element-UI）文章标签： vue.js es6 javascript

本文链接：https://blog.csdn.net/chenyx1998/article/details/109639294

版权

角色列表-通过路由展示角色列表组件

1.在 power 文件夹下，新建 Roles.vue
2.在 index.js 中进行导入

// 全局导入
import Roles from '../components/power/Roles.vue'

{
   
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        {
    path: '/welcome', component: Welcome },
        {
    path: '/users', component: Users },
        {
    path: '/rights', component: Rights },
        // 作为 home 页面的子路由
        {
    path: '/roles', component: Roles }
      ]
    }

角色列表-绘制基本布局结构并获取列表数据

1.卡片视图布局

<!-- 卡片视图 -->
    <el-card>
      <!-- 添加角色按钮区域 -->
      <el-row>
        <el-col>
            <el-button type="primary">添加角色</el-button>
        </el-col>
      </el-row>
    </el-card>

2.通过调用API获取数据

  data () {
   
    return {
   
      // 所有角色列表数据
      roleList: []
    }
  },
  // 生命周期函数
  created () {
   
    this.getRolesList()
  },
  methods: {
   
    // 获取所有角色的列表
    async getRolesList (