vue iview 两个select选项内容联动展示

重点就是 

@on-change="selectCategory(category_code)"

// code = 1、2、3、4、5、6、7

<FormItem label="场景" :label-width="60">
  <Select clearable v-model="category_code" @on-change="selectCategory(category_code)">
    <Option v-for="item in categoryList" :value="item.code" :key="item.code">{{ item.nameCN }}</Option>
  </Select>
</FormItem>

selectCategory (code) {
  if (code === 1) { 
        ...
  } else {
        
  }
}

有关代码 

<template>
  <div class="form">
    <Form :model="queryForm" inline>
      <FormItem label="场景" :label-width="60">
        <Select clearable v-model="category_code" @on-change="selectCategory(category_code)">
          <Option v-for="item in categoryList" :value="item.code" :key="item.code">{{ item.nameCN }}</Option>
        </Select>
      </FormItem>
      <FormItem label="事件名称" :label-width="80">
        <Select clearable v-model="event_code">
          <Option v-for="item in nameList" :value="item.key" :key="item.key">{{ item.value }}</Option>
        </Select>
      </FormItem>
      <FormItem :label-width="20">
         <Button type="info" @click="handleSearch">查询</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
    import { getCategoryData, getEventData } from '@/utils/constData'
export default {
  data () {
    return {
      nameList: '',
      nameListCopy: ''
    }
  },
  computed: {
    categoryList () { // 场景的内容,里面含7个场景,跟nameList一样在methods获取也是一样的
      const obj = getCategoryData() // 获取场景值的函数接口
      return Object.keys(obj).filter(key => key.length === 1).map(key => obj[key])
    }
  },
  watch: {},
  mounted () {
    this.handleSearch()
    this.initNameList()
  },
  methods: {
    initNameList () {
      const obj = getEventData() // 获取事件名称的函数接口
      this.nameList = Object.keys(obj).map(key => {
        const item = {
          key: parseInt(key),
          value: obj[key]
        }
        return item
      })
      // 因为nameList是全局的,每次做判断后nameList的内容都会根据场景值作相应修改,
      // 需要复制的一份完整的数据nameListCopy来每次循环找符合当下点击的场景值,
      this.nameListCopy = this.nameList 
    },
    selectCategory (code) {
      if (code === 1) { // 如果选择了"场景1"
        var nameList1 = []
        nameList1 = this.nameListCopy // 将全部事件赋值给nameList1
        const nameArr = [] // 定义一个空数组来装属于"场景1"的"事件"
        for (let i = 0; i < nameList1.length; i++) {
          if (按要求写判断代码,找出在数组nameList1中符合与code=1相关要求的对象元素),将满足要求的元素push到nameArr中 {
            nameArr.push(nameList1[i])
          }
        }
        this.nameList = nameArr // 已经找出全部事件中属于"场景1"的事件类型,赋给全局的nameList以展示
        console.log('code1 --- nameArr: ', nameArr) // 打印检查
      } else if (code === 2) { // 同上
        var nameList2 = []
        nameList2 = this.nameListCopy
        const nameArr = []
        for (let i = 0; i < nameList2.length; i++) {
          if (xxxx) {
            nameArr.push(nameList2[i])
          }
        }
        this.nameList = nameArr
        console.log('code2 --- nameArr: ', nameArr)
      } 
      
      ... 还有code=3、4、5 
      
      else if (code === 7) {
        var nameList7 = []
        nameList7 = this.nameListCopy
        const nameArr = []
        for (let i = 0; i < nameList7.length; i++) {
          if (xxx) {
            nameArr.push(nameList7[i])
          }
        }
        this.nameList = nameArr
        console.log('code7 --- nameArr: ', nameArr)
      } else { // 如果清空了场景菜单里面的选项内容,点击事件名称仍会展示全部事件
        this.nameList = this.nameListCopy
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>

---

场景数组 :只有7个场景

事件对象数组 : 后台返回所有的事件,根据事件的代码(key)值来判断该事件属于哪个场景