ElementUI/Vue 联级选择器Cascader 在实际中的应用

页面展示

代码

html部分

<el-form ref="form" :model="form" label-width="140px">
	<el-form-item label="指定分类(筛选)" prop="nrflCodeId">
		<el-cascader :options="nrflOptions" ref="cascaderAddr" 
					 @change="getOptionsValue" 
					 :props="defaultParams"
					 v-model="selectedOptions" size="mini" clearable>
					 </el-cascader>
	</el-form-item>
</el-form>

js部分

//......结构细节省略

return{
	form:{//表单
		nrflCodeId:""//vue页面中的prop,最终通过这个id返给后台
	},
	defaultParams: {//vue中的props 让后台哥们按照elementui中的数据格式传给你，然后一一对应
		label: 'name',
		value: 'codeId',
		children: 'children'
	},
	nrflOptions:[],//后台获到的data装进这里
	//selectedOptions: [],//查询条件中的联级选择器
}


//......结构细节省略


mounted(){
	this.getNrflOptions();//页面初始时调用获取下拉选项数据
},
methods:{
	getNrflOptions(){//获取option中的内容，页面初始的时候需要调用一次
		httpRequest({
		   url: "/api/******/*****",
		   success: (res) => {
		      if(res.code === 0){
				 this.nrflOptions=res.data;//给下拉选项赋值
		      }
		   }
		});
	},
	getOptionsValue(opt){
		this.form.nrflCodeId = opt[1];//赋值
	},
}

以上。