iview select 二级联动 对象

仅作参考,正在寻求更好的
#图例
在这里插入图片描述
#给后台数据类型
{
“a”:“感冒药”,
“b”:“1”
}
{
“a”:“阿司匹林”,
“b”:“1”
}
#代码

<FormItem label="药品类">
		<Select v-model="drug">
				<Option v-for="item in drugList" :value="item.value" :key="item.value">{{ item.label }}</Option>
		</Select>
</FormItem>
<FormItem label="药品详细">
		<Select v-model="det">
				<Option v-for="item in detList" :value="item.value" :key="item.value">{{ item.label }}</Option>
		</Select>
</FormItem>
//script
drug:{
	get() {
		    return this.drug ? this.drug.value : {}
		},
		set(value) {					
			this.drugSelectChange()
			if(value == 1){
				this.drugChangeList = this.medicineTraditionalList
			}else if(value == 2){
				this.drugChangeList = this.newMedicineList
			}else if(value == 3){
				this.drugChangeList = this.otherMedicineList
			}
			this.det = value
		    this.drug = this.drugList.find(item => {
		        return value == item.value
		    })
		}
	},
	drugChangeExt:{
		get() {
		    return this.drugChange ? thisdrugChange.value : {}
		},
		set(value) {
			if(value){
				this.drugChange = this.drugChangeList.find(item => {
					return value == item.value
				})
				if(this.det== 1){
					this.medicineTraditional = this.drugChange
				}else if(this.det== 2){
					this.treatProcess.newMedicine = this.drugChange
				}else if (this.det== 3){
					this.treatProcess.otherMedicine = this.drugChange
				}					
			}
		}
	},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 首先,在项目中引入iview和vue-resource: ``` import Vue from 'vue' import iView from 'iview' import 'iview/dist/styles/iview.css' import VueResource from 'vue-resource' Vue.use(iView) Vue.use(VueResource) ``` 2. 在vue文件中使用iviewSelect组件实现省市选择: ``` <template> <div> <Select v-model="province" @on-change="getCityList"> <Option v-for="(item, index) in provinceList" :value="item.id" :key="index">{{ item.name }}</Option> </Select> <Select v-model="city"> <Option v-for="(item, index) in cityList" :value="item.id" :key="index">{{ item.name }}</Option> </Select> </div> </template> <script> export default { data () { return { province: '', city: '', provinceList: [], cityList: [] } }, mounted () { this.getProvinceList() }, methods: { // 获取省份列表 getProvinceList () { this.$http.get('/api/province').then(res => { this.provinceList = res.data }) }, // 获取城市列表 getCityList () { this.$http.get('/api/city', { params: { province: this.province } }).then(res => { this.cityList = res.data }) } } } </script> ``` 3. 在后台实现省市数据接口: 省份接口: ``` app.get('/api/province', function(req, res) { res.json([ {id: 1, name: '北京'}, {id: 2, name: '上海'}, {id: 3, name: '广东省'}, {id: 4, name: '湖南省'} ]) }) ``` 城市接口: ``` app.get('/api/city', function(req, res) { var provinceId = req.query.province var cityList = [] switch(provinceId) { case '1': cityList = [ {id: 101, name: '北京市'}, {id: 102, name: '海淀区'}, {id: 103, name: '朝阳区'}, {id: 104, name: '东城区'}, {id: 105, name: '西城区'} ] break case '2': cityList = [ {id: 201, name: '上海市'}, {id: 202, name: '浦东新区'}, {id: 203, name: '徐汇区'}, {id: 204, name: '黄浦区'}, {id: 205, name: '静安区'} ] break case '3': cityList = [ {id: 301, name: '广州市'}, {id: 302, name: '深圳市'}, {id: 303, name: '珠海市'}, {id: 304, name: '佛山市'}, {id: 305, name: '东莞市'} ] break case '4': cityList = [ {id: 401, name: '长沙市'}, {id: 402, name: '株洲市'}, {id: 403, name: '湘潭市'}, {id: 404, name: '衡阳市'}, {id: 405, name: '邵阳市'} ] break default: break } res.json(cityList) }) ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值