关于element ui中的选择器和vue监听函数watch的一个结合使用：

关于element ui中的选择器和vue监听函数watch的一个结合使用：
需求如下：首先每选定一个选择器，另一个选择器中的内容要被渲染出来，思路就是，监听每个选择器中双向绑定的数据，一旦这个选择器中选定数据下一个选择器就去发送请求
补充一下关于这个选择器的一些小知识：v-model对应的是选中的内容，v-for循环的数组就是点开选择器你能看到的一系列的数据

第一个选择器中没有内容的时候，第二个选择器中是没有数据的

当第一个选择器中有数据的时候，第二个选择器可以开始选择

同理第二个和第三个也是一样，就不赘述了，上代码：

<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
        <el-form-item label="选择商家">
          <el-select v-model="organizationCheck" placeholder="请选择商家">
            <el-option
              v-for="item in optionsCheck"
              :key="item.value"
              :label="item.label"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择设备">
          <el-select v-model="organizationCheckDevice" placeholder="请选择设备">
            <el-option
              v-for="item in optionsCheckDevices"
              :key="item.value"
              :label="item.label"
              :value="item.identifier">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择版本">
          <el-select v-model="organizationCheckPatch" placeholder="请选择版本">
            <el-option
              v-for="item in optionsCheckPatch"
              :key="item.value"
              :label="item.label"
              :value="item.version">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" size="small" @click="onSubmitCheck">开始测试</el-button>
          <!-- <el-button size="small" @click="dialogFormVisibleCheck = false">取消</el-button> -->
        </el-form-item>
        <el-form-item label="测试结果">
          <el-input autosize type="textarea" v-model="result"></el-input>
        </el-form-item>
      </el-form>

在data中对应的双向绑定数据是：

data() {
		organizationCheck:'',
		organizationCheckPatch:'',
		organizationCheckDevice:'',

}

watch:{
	organizationCheck: {
        handler() {
          getOganizations().then((res) => {
            // console.log('........',res.data.organizations)
            const organizations = res.data.organizations
            let obj = organizations.find(o => o.name === this.organizationCheck);
            // console.log('///',obj)
            this.organizationId = obj.id
            // console.log('99999',this.organizationId)
          })
          let obj = this.optionsCheckSave.find(o => o.name === this.organizationCheck);
          getOganizationsDevices(obj.id).then((res) => {
            // console.log(res)
            this.optionsCheckDevices = res.data.devices
            const devices = res.data.devices
            let obj = devices.find(o => o.identifier === this.organizationCheckDevice);
            // console.log('pppppp',obj)
          })
        },
      },
      organizationCheckDevice: {
        handler() {
          let obj = this.optionsCheckSave.find(o => o.name === this.organizationCheck);
          // console.log('1111111',obj)
          getOganizationsDevices(obj.id).then((res) => {
            // console.log(res)
            this.optionsCheckDevices = res.data.devices
            const devices = res.data.devices
            let obj = devices.find(o => o.identifier === this.organizationCheckDevice);
            // console.log('222222',obj)
            this.deviceId = obj.id
            // console.log('0000',this.deviceId)
            getOganizationsDevicesCheck(this.organizationId,this.deviceId).then((res) => {
              // console.log('dyyadhy',res)
              this.deviceType = res.data.type
              const channelid = res.data.channel.id
              // console.log(channelid)
              getChannelDetail(channelid).then((res) => {
                // console.log(res)
                this.optionsCheckPatch = res.data.Patches
              })
            })


          })
          // let obj = this.optionsCheckSave.find(o => o.name === this.organizationCheck);
          // console.log(obj)
          // getOganizationsDevices(obj.id).then((res) => {
          //   console.log(res)
          //   this.optionsCheckDevices = res.data.devices

          // })
        },
      },
}