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];//指派
	},
}
           

以上。