iview2 Selelt的二级联动

Posted 2021-03-04 yilihua

在iview Select组件中是没有支持二级联动的，现在记录下具体使用：

<template>
  <div class="m-article">
    <Form ref="formValidate" :model="formValidate"
          :rules="ruleValidate" :label-width="100"
          label-position="left">
      <FormItem label="文章栏目" prop="categoryId">
        <Select v-model="formValidate.categoryId"  @on-change="changeSecList"
                style="width:200px">
          <Option v-for="item in categoryList"
                  :value="item.id" :key="item.id">
            {{ item.name }}</Option>
        </Select>
        <Select v-model="formValidate.secondname"
                style="width:200px">
          <Option v-for="item in secondnameList"
                  :value="item.secondname" :key="item.secondname">
            {{ item.secondname }}</Option>
        </Select>
      </FormItem>
    </Form>
  </div>
</template>

js的主要代码

<script>
  export default {
    data () {
      return {
        secondnameList: [],
        categoryList: [
          {
            "id":"5d638b9bcf1f7a000141b839",
            "name":"债券","secondnames":[
              {
                "secondname":"债券二级菜单1"
              },
              {
                "secondname":"债券二级菜单2"
              }
            ]
          },
          {
            "id":"5da1615f7deab70001eeea1c",
            "name":"股票","secondnames":[
              {
                "secondname":"股票二级菜单1"
              }
            ]
          }],
        formValidate: {
          categoryId: ‘‘,
          secondname: ‘‘,
        },
        ruleValidate: ruleValidate,
      };
    },
    methods: {
      changeSecList(val) {
        this.secondnameList = []
        for (var i=0;i< this.categoryList.length; i++) {
          if (val === this.categoryList[i].id) {
            this.secondnameList = this.categoryList[i].secondnames
          }
        }
      }
    },
  };
</script>

其实 实现思路很简单，主要就是利用select组件中的on-change事件进行监听。当他改变的时候重新渲染二级菜单达到我们的效果。

需要注意的几点是

1.当我们修改一级菜单的时候默认返回的是value，所以在方法里面我是通过val值进行匹配，判断当时选择的是哪个一级菜单，然后渲染对应的二级菜单。

2.我在Option里设置:value与:key的时候设置了不存在的值，所以会导致如下报错

 

 解决方法确保你设置的value与key当时是有值的状态即可。

先做这些简单的介绍，如果有需要可以更深入的学习。