2024-12-22-element

由饿了么开发的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>