vue的一个简单案例_this.adddialogvisible = true-优快云博客

本文链接：https://blog.youkuaiyun.com/Yuncoco/article/details/95803387
增删查改
在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css"
		href="element-ui/lib/theme-chalk/index.css" />
	</head>
	<body>
		<!--
				el-table 数据表格
				表格属性:
					data 显示的数据 是一个数组
					stripe 斑马纹
					border 带边框的表格
				el-table-column 表格的列
					prop/property  对应列内容的字段名
					label 显示的标题
					width 对应列的宽度
			-->
		<div id="app" >
			<el-row style="margin-top:10px">
				<el-col :span="20" :offset="2">
				 <el-button type="success" @click="openAddDialog"  round>添加</el-button>
				 </el-col>
			</el-row>
	<el-row style="margin-top:10px">
		<el-col  :span="20" :offset="2">
	 	 <el-table :data="heros"stripe border style="width: 100%" ></el-table-column>
	 	 <el-table-column type="selection" width="55"></el-table-column>
	 	<el-table-column type="index" width="50"></el-table-column>
	   	<el-table-column prop="name" label="姓名" width="180"></el-table-column>
	   	<el-table-column prop="sex" label="性别" width="180">
	   		<template slot-scope="scope">
	   			<span v-if="scope.row.sex==1" style="color: red;">女</span>
	   			<span v-else style="color: royalblue;">男</span>
			</template>
	   	</el-table-column>
	    <el-table-column prop="title" label="称号" width="180"></el-table-column>
	     <el-table-column prop="profession" label="职业" width="180">
	     	<template slot-scope="scope">
	     		<span v-if="scope.row.profession==0">法师</span>
	     		<span v-else-if="scope.row.profession==1">射手</span>
	     		<span v-else-if="scope.row.profession==2">战士</span>
	     		<span v-else>刺客</span>
	     	</template>
	     </el-table-column>
	      <el-table-column prop="operation" label="操作" width="180">
	      	<!--
					    		如果想自定义这一列的格式或者内容，列中使用template定义
					    		scope.$index 获取行的索引
					    	-->
	      	<template slot-scope="scope">
		        <el-button size="small "  @click="updatehero(scope.$index, scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
		         <el-button size="small " @click="deletehero(scope.$index)"   type="danger" icon="el-icon-delete" circle></el-button>
      		</template>
	      </el-table-column>
 		 </el-table>
 		 </el-col>
	</el-row>
	<!--
			el-dialog
			添加模态框
				titlle 标题
				visible.sync 是否打开模态框
				width 宽度
			-->
	<el-dialog
  		title="添加"
 		 :visible.sync="addDialogVisible"
  		width="30%">
  		 <!--
			  	el-form 表单
			  		model 表单数据对象 绑定data中的对象
			  		rules 使用验证规则
			  	el-form-item 表单字段
			  		label 标签文本
			  		prop 指定使用哪一个规则进行验证 -- 必须和字段名保持一致
			  		
			  	如果定义了rules和prop只是有验证的样式，
			  	验证功能需要在表单提交之前手动调用方法验证
			  		
			  -->
  		<el-form ref="addform" :rules="rules"  :model="addhero" label-width="80px">
  		 <el-form-item label="姓名:" prop="name">
    		<el-input v-model="addhero.name"></el-input>
 		 </el-form-item>
 		 <el-form-item label="性别:">
    		<el-radio v-model="addhero.sex" :label="1" >女</el-radio>
  			<el-radio v-model="addhero.sex" :label="2">男</el-radio>
 		 </el-form-item>
 		 <el-form-item label="称号:">
    		<el-input v-model="addhero.title"></el-input>
 		 </el-form-item>
 		  <el-form-item label="职业:">
    		<el-select v-model="addhero.profession"  clearable placeholder="请选择">
    		<!--
					    	label 选项的标签
					    	value 选项的值
					    -->
    			 <el-option
					      v-for="profession in professions"
					      :label="profession.name"
					      :value="profession.id">
				</el-option>
    		</el-select>
 		 </el-form-item>
  		</el-form>
  		  <!--底部的按钮-->
  		<div slot="footer" class="dialog-footer">
   		 <el-button @click="addDialogVisible = false">取 消</el-button>
   		 <el-button type="primary" @click="savehero">确 定</el-button>
  		</div>
	</el-dialog>
	
	</div>
		<script type="text/javascript" src="js/vue.js" charset="utf-8"></script>
		<script type="text/javascript" src="element-ui/lib//index.js" charset="utf-8"></script>
		<script type="text/javascript">
			
			var heros = [{
					id:'0',
					name:'艾希',
					sex:1,
					title:'寒冰射手',
					profession:1
					
				},
				{
					id:'1',
					name:'盖伦',
					sex:2,
					title:'德玛西亚之力',
					profession:2
				},
				{
					id:'2',
					name:'赵信',
					sex:2,
					title:'德邦总管',
					profession:2
				},
				{
					id:'3',
					name:'刀男',
					sex:2,
					title:'刀锋之影',
					profession:3
				}]
			var app = new Vue({
				el:"#app",
				data:{
					heros:heros,
					addDialogVisible:false,
					addhero:{
						name:null,
						age:null,
						sex:1,
						title:null,
						profession:null
					},
					professions:[{
						id:0,
						name:"法师"
					},{
						id:1,
						name:"射手"
					},{
						id:2,
						name:"战士"
					},{
						id:3,
						name:"刺客"
					}],
					rules:{
						//对哪个字典定义验证规则
						name:[
							{ required: true, message: '请输入姓名', trigger: 'blur' }
						]
					}
				},
				methods:{
					deletehero(index){
					this.$confirm('亲，你真的要放弃他嘛?', '提示', {
		          	confirmButtonText: '确定',
		          	cancelButtonText: '取消',
		         	 type: 'warning'
		        }).then(() => {
		        	this.heros.splice(index,1),
		          this.$message({
		            type: 'success',
		            message: '再见!'
		          });
					})
					},
					//点击添加按钮的回调
					openAddDialog(){
						//清空表单
						this.addhero = {
						name:null,
						sex:1,
						title:null,
						profession:null
						},
						this.addDialogVisible =true
					},
					//确定添加
					savehero(){
						//调用表单的验证方法
						//首先需要获取到表单组件对象
						this.$refs["addform"].validate((valid) => {
				          if (valid) {
				            //验证通过，提交
				            //将addhero的对象添加到heros数组的末尾
							//对象的复制
							this.heros.push(this.copyObj(this.addhero))
							//提示信息成功
							this.$message({
						          message: '添加成功!',
						          type: 'success'
						       });
							//关闭模态框
							this.addDialogVisible = false
				          } else {
				          	//验证不通过，阻止提交
				            return false;
				          }
				        });
					},
					//对象复制
					copyObj(obj){
						var newObj  = {}
						for(var p in obj){
							newObj[p] = obj[p]
						}
						return newObj;
					},
//					updatehero(index){
//						
//					this.addhero = heros[index]
//					this.addDialogVisible = true; 
//					}
				
					 //点击编辑按钮
					updatehero(index,row){
						this.addDialogVisible = true; //编辑信息模态框显示
   						this.addhero = Object.assign({}, row); // 获得所有数据显示在编辑信息模态框里面,将源对象（source）的所有可枚举属性，复制到目标对象（target）
   						 //this.addhero = heros[index];
					}
				}
					
						
			})
			
			
		</script>
	</body>
</html>