目标:公司页面的基本结构个角色管理结构
使用element-ui组件实现
角色管理与公司信息用tabs标签页组件实现基本一致 引入后稍微修改即可
角色管理的内容 添加的按钮 找button外加一个icon图标即可
角色管理的列表项的内容用table表格 中的 自定义列模板 与其他的组件一起搭配使用
角色管理下面的用Pagination 分页组件实现,方便快捷 注意引入代码的时候 <el-pagination layout="prev,pager,next" />中的参数用逗号隔开 prev,pager,next书写 不要再后面多加逗号 这样会导致页面报未知错误,
公司信息用form表单实现 直接引入
<template>
<div class="dashboard-container">
<div class="app-container">
<el-card>
<el-tabs>
<!-- 放置页签 -->
<el-tab-pane label="角色管理">
<!-- 新增角色按钮 -->
<el-row style="height:60px">
<el-button
icon="el-icon-plus"
size="small"
type="primary"
>新增角色</el-button>
</el-row>
<!-- 表格 -->
<el-table border="">
<el-table-column label="序号" width="120" />
<el-table-column label="角色名称" width="240" />
<el-table-column label="描述" />
<el-table-column label="操作">
<el-button size="small" type="success">分配权限</el-button>
<el-button size="small" type="primary">编辑</el-button>
<el-button size="small" type="danger">删除</el-button>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-row type="flex" justify="center" align="middle" style="height: 60px">
<!-- 分页组件 -->
<el-pagination layout="prev,pager,next" />
</el-row>
</el-tab-pane>
<el-tab-pane label="公司信息">
<el-alert
title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
type="info"
show-icon
:closable="false"
/>
<el-form label-width="120px" style="margin-top:50px">
<el-form-item label="公司名称">
<el-input disabled style="width:400px" />
</el-form-item>
<el-form-item label="公司地址">
<el-input disabled style="width:400px" />
</el-form-item>
<el-form-item label="邮箱">
<el-input disabled style="width:400px" />
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" :rows="3" disabled style="width:400px" />
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</div>
</template>请求数据 角色 的 编辑的 公司的 完事
