由饿了么开发的element开源项目属实是新手将页面做好的好帮手
我使用的element-ui网站：https://element.eleme.cn/#/zh-CN
示例-没有script部分
-
点击查看代码
<div id="app">
<!--导航菜单-->
<div class="line"></div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#409EFF"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1" @click="onSubmit">用户信息</el-menu-item>
<el-submenu index="2">
<template slot="title">我的功能</template>
<el-menu-item index="2-1" type="primary" plain @click="workersel">员工管理</el-menu-item>
<el-menu-item index="2-2" type="primary" plain @click="cc()">部门管理</el-menu-item>
</el-submenu>
<el-menu-item index="4"><a href="http://localhost:8080/xt.html" target="_blank">退出</a></el-menu-item>
</el-menu>
<!-- 新增员工表单-->
<el-dialog
title="新增员工"
:visible.sync="isworkeradd"
width="30%"
:before-close="handleClose"
clearable>
<span>
<el-form ref="form" :model="workeradd" label-width="80px">
<!-- jobID:'',-->
<!-- name:'',-->
<!-- sex:'',-->
<!-- birthday:'',-->
<!-- department:'',-->
<!-- role:'',-->
<!-- password:'',-->
<el-form-item label="工号">
<el-input v-model="workeradd.jobID"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="workeradd.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-input v-model="workeradd.sex"></el-input>
</el-form-item>
<el-form-item label="出生日期">
<el-input v-model="workeradd.birthday"></el-input>
</el-form-item>
<el-form-item label="角色">
<el-input v-model="workeradd.role"></el-input>
</el-form-item>
<el-form-item label="部门">
<el-input v-model="workeradd.department"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="workadd">立即注册</el-button>
<el-button @click="isworkeradd=false">取消</el-button>
</el-form-item>
</el-form>
</span>
</el-dialog>
<!-- 员工管理-->
<div v-if="isworker">
<!-- 条件查找-->
<!-- 新增按钮-->
<el-row>
<el-button type="primary" @click="isworkeradd=true">新增</el-button>
</el-row>
<!-- 员工表格-->
<template>
<el-table
:data="worker"
v-if="isTableVisibleworker"
style="width: 100%">
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column type="expand">
<!-- jobID:'',-->
<!-- name:'',-->
<!-- sex:'',-->
<!-- birthday:'',-->
<!-- department:'',-->
<!-- role:'',-->
<!-- password:'',-->
<template slot-scope="worker">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="工号">
<span>{{ worker.row.jobID }}</span>
</el-form-item>
<el-form-item label="姓名">
<span>{{ worker.row.name }}</span>
</el-form-item>
<el-form-item label="性别">
<span>{{ worker.row.sex }}</span>
</el-form-item>
<el-form-item label="出生年份">
<span>{{ worker.row.birthday }}</span>
</el-form-item>
<el-form-item label="部门">
<span>{{ worker.row.department }}</span>
</el-form-item>
<el-form-item label="角色">
<span>{{ worker.row.role}}</span>
</el-form-item>
</el-form>
<el-row>
<el-button type="primary" @click="upRowwork(worker.row)">修改</el-button>
<el-button type="danger" @click="deleteRowwork(worker.row)">删除</el-button>
</el-row>
</template>
</el-table-column>
<el-table-column
label="工号"
prop="jobID">
</el-table-column>
<el-table-column
label="姓名"
prop="name">
</el-table-column>
<el-table-column
label="性别"
prop="sex">
</el-table-column>
</el-table>
</template>
</div>
</div>