iview复选框小demo(****)_iview row col 复选框-CSDN博客

本文链接：https://blog.csdn.net/qq_37995109/article/details/88721106
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/iview.css" />
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript" src="js/iview.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<i-form ref="issueInfo" :model="issueInfo":rules="clueValidate">
				<Row>
					<i-col span="8" offset="2">
						<form-item label="接收类型" prop="JSLX">
							<radio-group v-model="issueInfo.JSLX" @on-change="jslx">
								<Radio label="01">城市接收</Radio>
								<Radio label="02">个人接收</Radio>
							</radio-group>
						</form-item>
					</i-col>	
				</Row>
				<Row style="margin-top: 2em;">
					<i-col span="8" offset="2">
						<form-item label="城市" prop="company">
							<i-select v-model="issueInfo.company" @on-change="v=>{companyChange(v,'type')}"  :multiple='issueInfo.multipleSelection' label-in-value='true' >
								<i-option  v-for='(item,index) in companyList' :key='item.value' :value='item.value'>{{item.label}}</i-option>
							</i-select>
						</form-item>
					</i-col>
					<i-col span="8" offset="2" v-show='issueInfo.show'>
						<form-item label="人" prop="person">
							<i-select v-model="issueInfo.person" @on-change="v=>{personChange(v,'type')}">
								<i-option v-for='(item,index) in personList' :key='index' :value='item.value'>
						        	{{item.label}}
						        </i-option>
							</i-select>
						</form-item>	
					</i-col>
				</Row>
				<Row>
			        <i-col span="23">
			        	<i-button size="large" type="default" style="float: right;margin-left: 1em;" @click="handleReset('formInline')">重置</i-button>
			        	<i-button size="large" type="primary" style="float: right;" @click="handleSubmit('issueInfo')">查询</i-button>
			        </i-col>
	    		</Row>
	    		<Row>
	    			<i-col span="21" offset="2">
		    			<div style="background: #C5C8CE;margin-top: 2em;">
		    				<form-item label="选择人：">
			    				<div>
			    					
			    				</div>
		    				</form-item>
		    				<div v-show="issueInfo.selectionUnit">
		    					<form-item label="选择单位：">
			    				<span v-for="(item,index) in issueInfo.dwList" :key="index" :value="item">
			    					{{item}}
			    				</span>
		    				</form-item>
		    				</div>
		    			</div>
	    			</i-col>
	    		</Row>
			</i-form>	
			
		</div>
		<script>
		var vm=new Vue({
			el:'#app',
	        data:{
	        	issueInfo:{
	        		company:'',
	        		person:'',
	        		JSLX:'01',
	        		show:false,
	        		selectionUnit:true,
	        		multipleSelection:true,
	        		dwList:'',
	        	},
	        	personAllList:[],
	            companyList:[
	            	{value:'01',label:'天津'},{value:'02',label:'北京'},{value:'03',label:'河北'},
	            ],
	            personList:[],
	            clueValidate:{
	    			JSLX:[
	    				{ required: true, message: '请输入案件编号', trigger: 'change', }
	    			],
	    			company:[
	    				{ required: true, message: '请输入侦查类别', trigger: 'change',type:'array' }
	    			],
	    			person:[
	    				{ required: true, message: '请输入提供线索日期', trigger: 'change' }
	    			]
	        	},
	        },
	        methods:{
	        	companyChange(value){
	        		console.log(value)
	        		if(this.issueInfo.JSLX=="01"){
	        			var name=[];
		        		for(var i = 0; i < value.length; i++){
		        		
		        			name.push(value[i].label);
		        		};
	        			this.issueInfo.dwList=name;
	        		}else if(this.issueInfo.JSLX=="02"){//lcsz 选个人
	        			this.personList=[];   // 清空数组
	        			//拿到companyList数据里面的value做判断
	        			if(value.value=="01"){	// 判断我的value是天津北京还是河北。
	        				this.personAllList=[{value:"tj1",label:"天津1",parentCom:"01"},{value:"tj2",label:"天津2",parentCom:"01"},]
		        		}else if(value.value=="02"){
		        			this.personAllList=[{value:"bj1",label:"北京1",parentCom:"02"},{value:"bj2",label:"北京2",parentCom:"02"},]
		        		}else if(value.value=="03"){
		        			this.personAllList=[{value:"hb1",label:"河北1",parentCom:"03"},{value:"hb2",label:"河北2",parentCom:"03"},]
		        		};
		        		for(let i=0;i<this.personAllList.length;i++){
		        			let obj=new Object();
		        			obj.label=this.personAllList[i].label;
		        			obj.value=this.personAllList[i].value;
		        			this.personList.push(obj);
		        		}
	        		}
					
	        	},
	        	personChange(value){
	        		
	        	},
	        	handleSubmit(name){
        			this.$refs[name].validate((valid) => {
        				if (valid) {
        					alert(111);
        				}else{
        					alert(222);
        				}
        			})
	        	},
	        	jslx(name){
	        		if(name=="01"){
	        			this.issueInfo.show=false;
	        			this.issueInfo.multipleSelection=true;
	        			this.clueValidate.company=[{ required: true, message: '请输入侦查类别', trigger: 'change',type:'array' }];
	        			this.issueInfo.selectionUnit=false;
	        			this.issueInfo.company=[];
	        		}else{
	        			this.issueInfo.show=true;
	        			this.issueInfo.multipleSelection=false;
	        			this.clueValidate.company=[{ required: true, message: '请输入侦查类别', trigger: 'change'}];
	        			this.issueInfo.company="";
	        		}
	        	}
	        	
	        }
		})
	</script>
	</body>
</html>