2019-11-28

最新推荐文章于 2022-10-14 15:40:59 发布
最新推荐文章于 2022-10-14 15:40:59 发布
阅读量140 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guo12345555/article/details/103292355
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue-elementui</title>
		<!--先引入vue.js库-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!--axios-->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}
			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}
			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}
			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-row>
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="员工工号或者部门名称">
						<el-input v-model="formInline.enameOrDname" placeholder="员工工号或者部门名称"></el-input>
					</el-form-item>
					<el-form-item label="所属部门">
						<el-select v-model="formInline.deptNo" placeholder="请选择">
							<el-option
									v-for="item in options"
									:key="item.dno"
									:label="item.dname"
									:value="item.dno">
							</el-option>
						</el-select>
						<!--
						dno, dname, job
						<el-select v-model="formInline.deptNo" placeholder="所属部门">
							<el-option label="请选择" value=""></el-option>
							<el-option label="行政部" value="1"></el-option>
							<el-option label="国防部" value="2"></el-option>
							<el-option label="市场部" value="3"></el-option>
						</el-select>-->
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查询</el-button>
						<el-button type="primary" @click="toSave">添加</el-button>
						<el-button type="primary" @click="flush">刷新</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
			 <el-table
		      :data="tableData"
		      style="width: 100%">
		      <el-table-column
		        prop="ename"
		        label="姓名"
		        width="180">
		      </el-table-column>
		     <!-- <el-table-column
		        prop="dno"
		        label="部门编号"
		        width="180">
		      </el-table-column>-->
		      <el-table-column
		        prop="sex"
		        label="性别">
		      </el-table-column>
				 <el-table-column
						 prop="empno"
						 label="员工编号">
				 </el-table-column>
				 <el-table-column
						 prop="dname"
						 label="部门名称">
				 </el-table-column>
				 <el-table-column
						 prop="hiredate"
						 label="入职时间">
				 </el-table-column>
				 <el-table-column
						 prop="headpicname"
						 label="头像原文件名称">
				 </el-table-column>
				 <el-table-column
						 label="头像">
					 <template slot-scope="scope">
						 <img v-if="scope.row.headpic" :src="'/show?FileName='+scope.row.headpic" height="100px;" width="100px;">
					  </template>
				 </el-table-column>
				 <el-table-column label="操作">
					 <template slot-scope="scope">
						 <el-button type="primary"
								 size="mini"
								 @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						 <el-button
								 size="mini"
								 type="danger"
								 @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					 </template>
				 </el-table-column>
		    </el-table>
			</el-row>
			<el-row>
				<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="[2,3,4,5,10,15,100, 200, 300, 400]"
						:page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total">
				</el-pagination>
			</el-row>
			<el-row>
				<!--添加修改弹出框-->
				<el-dialog :title="title" :visible.sync="dialogFormVisible">
					<el-form :model="form">
						<!--隐藏主键-->
						<el-input v-model="form.empno" type="hidden" autocomplete="off"></el-input>
						<el-form-item label="用户名" :label-width="formLabelWidth">
							<el-input v-model="form.userName" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="密码" :label-width="formLabelWidth">
							<el-input v-model="form.passWord" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="姓名" :label-width="formLabelWidth">
							<el-input v-model="form.ename" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="性别" :label-width="formLabelWidth">
							<template>
								<el-radio v-model="form.sex" label="男">男</el-radio>
								<el-radio v-model="form.sex" label="女">女</el-radio>
							</template>
						</el-form-item>
						<el-form-item label="雇佣日期" :label-width="formLabelWidth">
							<el-date-picker
									v-model="form.hiredate"
									align="right"
									type="date"
									placeholder="选择日期"
									:picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="部门编号" :label-width="formLabelWidth">
							<el-select v-model="form.dno" placeholder="请选择">
								<el-option
										v-for="item in options"
										:key="item.dno"
										:label="item.dname"
										:value="item.dno">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="角色授权">
							<el-button type="primary" @click="showRoles">拥有角色</el-button>
						</el-form-item>
						<el-form-item label="原头像" v-if="form.headpic" :label-width="formLabelWidth">
							<img v-if="form.headpic" :src="'/show?FileName='+form.headpic" height="160px;" width="160px;">
						</el-form-item>
						<el-form-item label="人员头像" :label-width="formLabelWidth">
							<el-upload
									name="headPic"
									class="avatar-uploader"
									action="/uploadHeadPic"
									:show-file-list="false"
									:on-success="handleAvatarSuccess"
									:before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button type="danger" @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="saveData">确 定</el-button>
					</div>
				</el-dialog>
			</el-row>
			<el-dialog title="角色树" :visible.sync="dialogRoleFormVisible">
				<el-tree :data="treeData" default-expand-all
						 ref="tree"
						 node-key="id"
						 show-checkbox
						 check-strictly="true"
						 :default-checked-keys="checkedKeys"
						 @check-change="handleRoleTreeClick"
				></el-tree>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialogRoleFormVisible = false">确 定</el-button>
				</div>
			</el-dialog>
	    </div>
	    <script>
	    	var vue =new Vue({
	    		el:"#app",
	    		data:{
	    			tableData:[],
                    currentPage:1,
                    pageSize:5,
                    total:0,
                    formInline: {
                        enameOrDname: '',
                        deptNo: ''
                    },
                    options:[],
                    title:'',
                    dialogFormVisible: false,
                    form: {
                        ename: '',
                        dno:'',
                        sex: '男',
                        empno: '',
                         dname: '',
                         hiredate: '',
						headPic:'',
						headPicName:'',
                        roleIds:'',
						userName:'',
						passWord:''
                    },
                    formLabelWidth: '120px',
                    pickerOptions: {
                        disabledDate:function(time) {
                            return time.getTime() > Date.now();
                        },
                        shortcuts: [{
                            text: '今天',
                            onClick:function(picker) {
                                picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '昨天',
                            onClick:function(picker) {
                                var date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        }, {
                            text: '一周前',
                            onClick:function(picker) {
                                var date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }]
                    },
					url:'',
                    imageUrl: '',
                    dialogRoleFormVisible:false,
                    treeData:[],
                    checkedKeys:[]
	    		},
				created:function(){
	    		   this.loadData();
                    var self = this;
	    		   //获取所有部门
                    axios.post('/dept/list')
                        .then(function (response) {
                            self.options=response.data;
                        });
                    axios.post("/roleTree")
                        .then(function (response) {
                            self.treeData=response.data;
                        })
				},
                methods: {
				    loadData:function(){
                        var self = this;
                        //开始位置  (currentPage-1)*pageSize
                        var start = (this.currentPage-1)*this.pageSize;
                        axios.post('/emp/page',{"start":start,"pageSize":this.pageSize,
							"ename":this.formInline.enameOrDname,"deptNo":this.formInline.deptNo})
                            .then(function (response) {
                                //JSON.parse()把json字符串转换为json对象
                                self.tableData=response.data.empList;
                                self.total=response.data.total;
                            })
                            .catch(function (error) {
                            })
                            .then(function () {
                                // always executed
                            });
					},
                    handleSizeChange:function(val) {
                        this.pageSize=val;
                        this.loadData();
                    },
                    handleCurrentChange:function(val) {
                        this.currentPage=val;
                        this.loadData();
                    },
                    onSubmit:function() {
                        this.loadData();
                    },
                    flush:function(){
				        this.pageSize=3;
				        this.currentPage=1;
				        this.formInline.deptNo='';
                        this.formInline.enameOrDname='';
                        this.loadData();
					},
					toSave:function(){
                        this.title='员工添加';
                        this.url="/emp/save";
                        this.form={ename: '', dno:'', sex: '男', empno: '', dname: '', hiredate: '',
                            headPic:'',
                            headPicName:'',userName:'',passWord:''};
                        this.imageUrl ='';
                        //让弹出框显示
                       this.dialogFormVisible=true;
					},
					handleEdit:function(index, row) {
                        this.title='员工修改';
                        this.url="/emp/update";
                        //赋值
                        this.form=row;
                        this.imageUrl ='';
                        //让弹出框显示
                        this.dialogFormVisible=true;
                    },
					saveData:function(){
					    var self=this;
                        axios.post(this.url, this.form)
                            .then(function (response) {
                                //添加或者修改成功
                                if(response.data==1){
                                    self.$message({
                                        message: '恭喜你， 操作成功',
                                        type: 'success'
                                    });
                                    //关闭弹出框
                                    self.dialogFormVisible=false;
									//刷新页面
									self.loadData();
								}else{ //添加或者修改错误
                                    self.$message.error('错了哦， 操作错误');
								}
                            })
					},
                    handleDelete:function(index, row) {
                        var self=this;
                            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(function() {
                                axios.post("/emp/delete?empNo="+row.empno)
                                    .then(function (response) {
                                        //添加或者修改成功
                                        if(response.data==1){
                                            self.$message({
                                                type: 'success',
                                                message: '删除成功!'
                                            });
                                            //刷新页面
                                            self.loadData();
                                        }else{ //添加或者修改错误
                                            self.$message.error('错了哦， 操作错误');
                                        }
                                    })

                        }).catch(function() {
                                this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        });
                        },
                    handleAvatarSuccess:function(res, file) {
                        this.imageUrl = URL.createObjectURL(file.raw);
						this.form.headPicName = file.response.originalFilename;
                        this.form.headPic =file.response.newFileName;
                    },
                    beforeAvatarUpload:function(file) {
                        var isJPG = file.type === 'image/jpeg';
                        var isLt2M = file.size / 1024 / 1024 < 2;

                        if (!isJPG) {
                            this.$message.error('上传头像图片只能是 JPG 格式!');
                        }
                        if (!isLt2M) {
                            this.$message.error('上传头像图片大小不能超过 2MB!');
                        }
                        return isJPG && isLt2M;
                    },
					showRoles:function(){
                        this.checkedKeys=[];
                        var _this=this;
                        if(_this.form.empno!='') {
                            axios.post("/roleTree")
                                .then(function (response) {
                                    _this.treeData = response.data;
                                    axios.post("/getRolesByUserId?userId=" + _this.form.empno)
                                        .then(function (response) {
                                            _this.checkedKeys = response.data;
                                        })
                                })
                        }
					    this.dialogRoleFormVisible=true;
					},
                    handleRoleTreeClick:function(){
						//[ 2, 9, 10]
						console.log(this.$refs.tree.getCheckedKeys());
						var nodes = this.$refs.tree.getCheckedKeys()+"";
						var tnodes = nodes.replace("[").replace("]").replace(" ");//2,9,10
						console.log(tnodes);
						this.form.roleIds=tnodes;
               		 }

				}
	    	});
	    </script>
	</body>
</html>
guo12345555
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-form表单组件的标签属性label-width和label-position
m0_57263959的博客
06-15 6947
属性时，可以指定一个具体的宽度值，如像素（px）或百分比（%）。该值决定了标签在水平方向上的宽度，以便在表单布局中进行对齐或控制标签的长度。可以是一个响应式的变量，在 Vue 的 data 中定义，并根据需要进行设置，如。它通常用于与输入框、选择框等表单元素一起使用，以确定标签的显示位置。它通常用于与输入框、选择框等表单元素一起使用，以确定标签的宽度。属性是用于指定表单元素标签宽度的常见属性。通过设置该属性，可以。，并根据具体的布局需求来调整标签的长度。是一个常见的属性，用于。是一个常见的属性，用于。
解决element中的form设置label-width后，form-item的内容和label名会产生跟label-width一样的左边距
zyxczyf123的博客
11-27 1万+
form组件中设置label-width这个属性然后配合label-position可以设置标签对齐方式。 达到以下的效果： 但是在设置之后却出现了这种情况 在form中添加这个属性inline=false就可以解决这个问题
vue数据增删改查及表单验证
qq_64001795的博客
10-14 3629
图三。
element ui表单el-form的label自适应宽度
qq_42970173的博客
11-25 3万+
在ElementUI官方文档中el-form提供了一个参数 label-width： 可以在form表单中设置label-width宽度（作为 Form 直接子元素的 form-item 会继承该值），但问题来了，如果不确定标签的长度，给固定值容易造成过长标签的换行，导致页面布局错乱。 所以把label-width设置为auto <el-form ref="form" :model="form" label-width="auto" size="small" > </e
B站(云e办)SpringBoot实战练习的Sql文件、前端Vue源码、后端springboot源码
m0_54849806的博客
02-26 1054
B站SpringBoot实战练习的资源 1. Sql下载地址： 2. 前端源码下载地址： 3. 后端源码下载地址 资源来源——网络资源搜索！github开源项目练习！ 1. Sql下载地址： 链接：点击我下载sql文件 提取码：yeb7 2. 前端源码下载地址： 链接：点我下载前端代码 提取码：yeb7 3. 后端源码下载地址 链接：点我下载前端代码 提取码：yeb7 如需在线api文档请联系 qq： 87395809, 表明来意 总结 写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自
Steinberg_Cubase_10.5.0_+Aria.2019-11-28.rar
02-29
《Cubase 10.5：专业音乐制作软件的深度解析》 Cubase，作为全球知名的专业音乐制作软件，一直以来都是音乐人创作的重要工具。Cubase 10.5版本的发布，无疑为音乐制作领域带来了一股新的热潮。...
芯邦量产工具2019-07到2020-09年所有的.zip
11-26
这款工具涵盖了2019年7月至2020年9月间的多个版本，反映了芯邦科技在这段时间内对U盘生产工具的持续更新与优化。 首先，我们来看CBM209X UMPToolV7200系列。这个系列的工具主要针对芯邦的CBM209X系列芯片，例如CBM...
2019-2020学年度第一学期七年级数学期中考试卷.doc
10-11
这份文档是2019-2020学年度第一学期七年级的数学期中考试试卷，涵盖了初一数学的基础知识点。试卷分为选择题、填空题、解答题和方程解题四个部分，主要涉及以下数学概念： 1. **有理数运算**：题目中的选择题和填空...
2019-talks
03-09
2019年讲座 GopherCon Brasil 2019会谈 讲者 请随幻灯片一起提交PR。 快速链接 会谈（27/09） 时隙 扬声器 滑梯 ... 里卡多·隆加（Ricardo Longa）/克莱尔森·...会谈（28/09） 时隙 扬声器 滑梯 视频 9:45 拉斐尔
Draft 2019-05-14 11:28:20-数据集
03-29
数据集是信息技术领域中用于研究和分析的重要工具，特别是在机器学习、数据分析和人工智能等子领域。本数据集“happiness_test_complete.csv”可能包含了与幸福感或满意度相关的数据，这可能是某个研究项目的一部分...
element ui中表单el-form的label怎么设置宽度
热门推荐
qq_38916157的博客
11-14 3万+
测试要求把输入框前面的名字带括号的把括号部分显示在下一行，可以通过设置前面的label宽度来进行换行。 在具体的el-form-item中设置label-width， 也可以为整个表单el-form设置label-width，这样整个页面的label宽度统一。 ...
ExtJS中FormPanel的labelWidth问题
chenyiya的专栏
01-07 2313
项目需要，在一个弹窗中只有一个FormPanel，form中也只有一个textarea，不需要label，但初始时不管怎样设置label，该宽度依然存在。查看源码，labelWidth默认宽度确实是100，实际操作中，改大可以，改小不见效果。未对源码进行修改，后将layout:form改成layout:fit，之前设置均得到展现，原来布局不自觉的写成form，大意了，也是经验不足！ EXTJS中
elementui el-select 两个下拉框，后面的内容是前面内容的子集
weixin_43173924的博客
04-29 4547
效果： 代码： <el-form-item label="所属者" :label-width="formLabelWidth"> <el-select v-model="formItem.subordinate" placeholder="请选择" ...
Element中使用el-form-item内部el-input为textarea时由于自生成的.el-form-item__content导致无法设置textarea百分比宽度问题解决
fwhdzh的博客
04-08 2万+
需求 使用ElementUI创建一个网上书店系统时，一个界面需要实现一个弹出框上提交一个较多信息的表单的效果。需求类似于下图。 前提条件 由于表单内容较多，设置其格式为小尺寸和行内元素 <el-form :model="book" size="small" inline="true"> 对于上方两个公用一行的表单项，按照以下模板设置。 <el-form-item label=...
label和span标签设置宽度width无效的解决办法
aspu O_O的博客
07-11 2万+
如何用CSS使label标签等宽？ 密码 确认密码 如何对齐呢？加空格的方法不好哦。（因为label中的字数不一样，所以页面显示效果不对齐） 问题原因及解决办法： label默认为内联元素，元素前后没有换行符，并且不可以设置宽度。 如果要为label设置宽度，则需要改变label的display属性，使其变为一个块级元素。 方法如下： 1.增加inline-bl
如何实现vue表单验证cron表达式？【亲测有效】
**My Coding Family**
12-03 6213
如何实现vue表单验证cron表达式？【亲测有效】
element-ui 无法对绑定表单的对象中的对象属性进行验证
youxiu326的博客
11-27 3464
  &lt;el-form-item label="类型" :label-width="formLabelWidth" prop="typeId"&gt; &lt;template&gt; &lt;el-select v-model="form.typeId" clearable placeholder="请选择"&gt;
element时间选择器添加自定义的时间判断
19年8月小结
05-13 740
<el-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime" :rules="[ { required: true, message: '请选择生效时间111', trigger: 'change'}, { validator: validateDate, trigger:'change' } ]"> ...
2023/07/13 17:28:38 - HBase output.0 - ERROR (version 8.3.0.0-371, build 8.3.0.0-371 from 2019-06-11 11.09.08 by buildguy) : Unexpected error 2023/07/13 17:28:38 - HBase output.0 - ERROR (version 8.3.0.0-371, build 8.3.0.0-371 from 2019-06-11 11.09.08 by buildguy) : org.pentaho.di.core.exception.KettleValueException: 2023/07/13 17:28:38 - HBase output.0 - Unexpected conversion error while converting value [EDUCATION_LEVEL String(30)] to an Integer\
最新发布
07-14
根据错误日志显示，出现了意外的转换错误，将值 [EDUCATION_LEVEL String(30)] 转换为整数时发生了错误。这可能是由于在HBase输出步骤中，你指定的列限定符对应的字段类型为整数，但实际的值是字符串类型的。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值