代码实现用户列表,还有数据统计那个图
此处为用户列表代码
具体的暴露导入导出,还有路由地址之类,这个不难,差不多可以了
<template id="app">
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
<!-- 搜索框添加 -->
<el-row :gutter="20">
<!-- 列和宽 -->
<el-col :span="9"> <el-input placeholder="请输入内容"
v-model="queryInfo.query" clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search"
@click="getUserList"></el-button>
</el-input></el-col>
<el-col :span="4">
<el-button type="primary" @click="addDialogVisible=true">
添加用户
</el-button>
</el-col>
</el-row>
<!-- 用户列表区域 -->
<el-table :data="userlist" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column label="姓名" prop="username"> </el-table-column>
<el-table-column label="邮箱" prop="email"> </el-table-column>
<el-table-column label="电话" prop="mobile"> </el-table-column>
<el-table-column label="角色" prop="role_name"></el-table-column>
<el-table-column label="状态" prop="mg_state">
<template slot-scope="scope">
<!-- {
{scope.row}} -->
<el-switch v-model="scope.row.mg_state" @change=userStateChanged(scope.row)>
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserByid(scope.row.id)"></el-button>
<el-tooltip effect="dark" content="分配角色" placement="top">
<el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change&#