码迷,mamicode.com
首页 > 其他好文 > 详细

iview2 Selelt的二级联动

时间:2020-03-20 10:43:53      阅读:43      评论:0      收藏:0      [点我收藏+]

标签:name   选择   改变   lis   二级联动   文章   color   解决方法   this   

在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当时是有值的状态即可。

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

 

iview2 Selelt的二级联动

标签:name   选择   改变   lis   二级联动   文章   color   解决方法   this   

原文地址:https://www.cnblogs.com/yilihua/p/12529925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!