vue-element-admin学习（三）dashboard总控面板的使用_vue dashboard

页面效果：

作者在这里将一个个组件分别开发，然后统一引入
分模块开发组件：

引入：

<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
1
2
3
4
5
6
7
8
9
10

使用组件：

export default {
  name: 'DashboardAdmin',
  components: {
    GithubCorner, // github角标，就是那只小猫咪
    PanelGroup, // 页头4个展示框
    LineChart, // 折线图
    RaddarChart, // 雷达图
    PieChart, // 圆角统计图
    BarChart, // 竖线图
    TransactionTable, // 价格表
    TodoList, // 待做事宜
    BoxCard // 卡片盒子
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

另外，这里是admin专属，，在main页面对加载进行了控制，我们的入口

<script>
// 导入了两种主页
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'

export default {
  name: 'Dashboard',
  // 根据参数选择取出对应的组件页面
  components: { adminDashboard, editorDashboard },
  data() {
    return {
    // 预置参数
      currentRole: 'adminDashboard'
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
  // 根据条件变化预置参数，干预最终加载结果
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
    if (this.roles.includes('dev3')) {
      this.currentRole = 'adminDashboard'
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

加载流程：
index——》根据条件加载主页组件——》主页加载封装好的组件