（1）三個下拉框，第二個和第三個都需要第一個下拉框的資料id才能通過介面請求到資料

（2）遇到的問題，二、三下拉框的資料更新不同步

（3）滑鼠點選二次才能將下拉框彈出

<template>
<ul class="h45">

					<li class="left" >
						<p class="left text-right w100 fc-4 mt10">部門</p>
						<p class="row-box">
							<select id="workergroupid" v-on:change="choosegroup($event.target)" class="form-control w200">
							<option value="">請選擇部門</option>
							<option v-for="item in grouplist" v-bind:value="item.group_id">{{ item.group_name }}</option>
							</select>
						</p>
					</li>

					<li class="left">
						<p class="left text-right w100 fc-4 mt10">職位</p>
						<p class="row-box">
							<select id="workerroleid" name="workerroleida"  class="form-control w200" >
								<option>請選擇職位</option>
								<option v-for="roleitem in rolelist" v-bind:value="roleitem.role_id">{{roleitem.role_name}}</option>
							</select>

						</p>
					</li>	


					<li class="left">
						<p class="left text-right w100 fc-4 mt10">上級</p>
						<p class="row-box">
							<select id="workerpidid" name="workerroleidb"  class="form-control w200">
								<option>請選擇上級</option>
								<option v-for="piditem in pidlist" v-bind:value="piditem.worker_id">{{piditem.role_name}}-{{piditem.worker_name}}</option>
							</select>
						</p>
					</li>	

				</ul></template>
 

<script>
  export default {

	  data (){
		  return{
			  groupid:"",
			  grouplist:[],
			  pidlist:[],
			  rolelist:[]
		  }
	  },

	  mounted:function(){
		  this.getgrouplist()
		  
	  },

	  methods:{
		getgrouplist(){
			
			var sendData = {};
			var jsonData = {};
				sendData.url ="www.baidu.com";
				jsonData.token = "1111111111111111";
				jsonData.phone = "111111111111";
			sendData.data = jsonData;
			$.ajax({
				url:"http://www.baidu.com/abc.php",
				data:sendData,
				dataType:"Json",
				success:function(re){	
					this.grouplist=re.data;
					
				}.bind(this)
			});
		},
	
		choosegroup(obj){
			
			var that=this;
			this.groupid=obj.value;
			/*this.$options.methods.chooserole(this.groupid);
			this.$options.methods.choosepid(this.groupid);*/
			//this.$options.methods.choosepid(this.groupid);
			//console.log(this.pidlist);

			var sendData = {};
			var jsonData = {};
			sendData.url ="www.baidu.com";
			jsonData.token = "1111111111111111";
			jsonData.phone = "111111111111";
			jsonData.group_id=this.groupid;
			sendData.data = jsonData;
			$.ajax({
				url:"http://www.baidu.com/abc.php",
				data:sendData,
				dataType:"Json",
				success:function(re){
					if(re.status==1){
						var abc=re.data;
						for(var $i=0;$i<abc.length;$i++){
							that.rolelist.push(abc[$i]);
						}		
					}else{
						layer.msg(re.msg);
					}
				}
			});
			if(obj.value){
				
				var vm=this;
				var sendData = {};
				var jsonData = {};
				sendData.url ="www.baidu.com";
				jsonData.token = "1111111111111111";
				jsonData.phone = "111111111111";
				jsonData.group_id=this.groupid;
				sendData.data = jsonData;
				$.ajax({
					url:"http://www.baidu.com/abc.php",
					data:sendData,
					dataType:"Json",
					success:function(re){
						if(re.status==1){
							var abc=re.data;
							for(var $i=0;$i<abc.length;$i++){
								vm.pidlist.push(abc[$i]);
							}		
						}else{
							layer.msg(re.msg);
						}
					}
				});
			}else{
				console.log("錯誤");
			}

		


		},
</script>