- 用
v-model绑定值 在事件chang中 回调的值不需要重新复制在v-model 所绑定的变量上。
因为他是双向绑定的。
2.需求：有三个下拉框，初始化每个下拉框赋值第一个v-mode=firstboxvalue。或取第二个下拉框数据需要传第一个的id，获取第三个需要传第一个id 第二个id 。当第一个下拉框变化时，第二个下拉框值随着变化，第二个下拉框值变化时第三个下拉框随着变化
解法：首先定义fistarr=[],seconedarr=[];thirdarr=[];
第一步：获取第一个下拉框数据。在mounted 中 ，
第二步：监听 第fistarr值的变化，变化了给第一个下拉框设置初始值为 firstboxvalue=fistarr[0].firstid ,同时传参获取第二下拉框的数据 seconedarr
第三步：监听seconedarr 值的变化，变化了给第2个下拉框设置初始值为 seconedboxvalue=seconedarr[0].seconid,同时传参获取第3下拉框的数据 thirdarr
第四部 ：监听thirdarr值的变化，变化了给第3个下拉框设置初始值为 thirdboxvalue=thirdarr[0].thirdid,
第四部 给下拉框写 change事件
当 下来变化时，重新获取它下以级的数据。
例如：
<template>
<div class="table-page-search-wrapper">
<!-- 效能分析--故障分析--设备日志公共查询 -->
<a-form layout="inline">
<a-row :gutter="48">
<a-col :sm="24" :md="12" :lg="8" :lx="8" v-if="'factoryname' in queryCondition">
<a-form-item
label="nameone">
<a-select v-model="efmobj.factoryname" allowClear placeholder="请选择" @change="handleChange($event,'factory')">
<a-select-option v-for="item in factoryList" :key=" item.factoryID" :value="item.factoryID">{{ item.factoryName }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :sm="24" :md="12" :lg="8" :lx="8" v-if="'linename' in queryCondition">
<a-form-item label="seconedname">
<a-select v-model="efmobj.linename" placeholder="请选择" allowClear default-value="0" @change="handleChange($event,'line')">
<a-select-option v-for="item in lineList" :key=" item.productLineID" :value="item.productLineID">{{ item.productLineName }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :sm="24" :md="12" :lg="8" :lx="8" v-if="'processname' in queryCondition">
<a-form-item label="thridname">
<a-select v-model="efmobj.processname" placeholder="请选择" allowClear default-value="0" @change="handleChange($event,'process')">
<a-select-option v-for="item in processList" :key="item.processID" :value="item.processID">{{ item.processName }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :sm="24" :md="12" :lg="8" :lx="8" v-if="'equipmentname' in queryCondition">
<a-form-item label="设备名称">
<a-select v-model=" efmobj.equipmentname" placeholder="请选择" allowClear default-value="0" @change="handleChange($event,'equip')">
<a-select-option :value="0">全部</a-select-option>
<!-- <a-select-option :value="equipmentList.join().toString()">全部</a-select-option> -->
<a-select-option v-for="item in equipmentList" :key="item.machineID" :value="item.machineID">{{ item.machineName }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script>
import moment from 'moment'
data () {
return {
efmobj: {
factoryname: null,
linename: null,
processname: null,
equipmentname: null
},
factoryList: [],
lineList: [],
processList: [],
equipmentList: [],
}
},
watch: {
factoryList (nnn, ooo) {
this.efmobj.factoryname = this.factoryList.length != 0 ? this.factoryList[0].factoryID : null
this.getlinedata(this.efmobj.factoryname)
},
lineList (nnn, ooo) {
this.efmobj.linename = this.lineList.length != 0 ? this.lineList[0].productLineID : null
this.getprocessdata(this.efmobj.factoryname, this.efmobj.linename)
},
processList (nnn, ooo) {
this.efmobj.processname = this.processList.length != 0 ? this.processList[0].processID : null
this.getequipmentdata(this.efmobj.factoryname, this.efmobj.linename, this.efmobj.processname)
},
equipmentList (nnn, ooo) {
this.efmobj.equipmentname = this.equipmentList.length != 0 ? this.equipmentList[0].machineID : null
this.$emit('oksearch', this.pageobj, this.efmobj)
}
},
mounted () {
this.getfactorydata()
},
methods: {
moment,
handleChange (param1, param2) {
var that = this
switch (param2) {
case 'factory':
// that.efmobj.factoryname = param1
that.getlinedata(param1)
break
case 'line':
// that.efmobj.linename = param1
that.getprocessdata(that.efmobj.factoryname, param1)
break
case 'process':
// this.efmobj.processname = param1
// console.log(this.efmobj.processname, '3333333333333')
this.getequipmentdata(this.efmobj.factoryname, this.efmobj.linename, param1)
break
case 'equip':
this.efmobj.equipmentname = param1
break
default:
}
},
}
}
</script>
