这篇文章给大家介绍怎么在Vue中利用iView实现二级联动,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
1、html部分
<template> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"> <FormItem prop="province" label="省份"> <Select v-model="formValidate.province" placeholder="请选择城市" @on-change="change"> <Option v-for="item in provinceArr" :key="item.id" :value="item.id" >{{ item.name}}</Option> </Select> </FormItem> <FormItem prop="city" label="城市"> <Select v-model="formValidate.city" placeholder="请选择省份"> <Option v-for="item in cities" :key="item.id" :value="item.id" >{{ item.name}}</Option> </Select> </FormItem> </Form> </template>
2、JS主要部分
<script> export default{ data(){ return { provinceArr: [ { id:1, name:"北京市", cities:[{id:11, name:"北京市"}] }, { id:2, name:"天津市", cities:[{id:12, name:"天津市"} ] }, { id:3, name:"上海市", cities:[ {id:13, name:"上海市"} ] } ], cities: "", formValidate:..., ruleValidate:... } }, methods:{ change(val){ for(var i=0; i<this.provinceArr.length; i++){ if(val == this.provinceArr[i].id ){ this.cities = this.provinceArr[i].cities; } } } } } </script>
关于怎么在Vue中利用iView实现二级联动就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。