使用vue框架实现部门大区二级联动

来源：互联网发布：mysql安装版 64位编辑：程序博客网时间：2024/05/17 02:46

最近项目用到vue.js，研究了半天，用vue写了一个部门大区的二级联动，发现工具真是好用，比以前少了很多代码，记录下来也方便自己以后查阅，下面是代码

<script type="text/javascript">    $(function(){        loadfirst(0);    });    function sub(id){loadfirst(id);    }    function loadfirst(pid){$.ajax({    type:"post",    url:"testurl.action?pid="+pid,    dataType:"json",    success:function(data){                //id为0时为父类               if(pid==0){            vm.mcs=data;        }else{            vm2.mcs=data;        }            }        });    }</script>  </head>  <body>    <div id="sel"  v-cloak>        //部门，第一个select框       <select id="dqsel" >    <option>-请选择-</option>    <option v-for="mc in mcs" v-bind:value="mc.id" @click="sub(mc.id)">{{mc.name}}</option>    </select>          //大区，第二个select框    <select id="bmsel">    <option>-请选择-</option>    <option v-for="mc in mcs" v-bind:value="mc.id">{{mc.name}}</option>    </select>    </div>     </body>  <script type="text/javascript">var vm = new Vue({            el:'#dqsel',    data:{                mcs : [],    }});var vm2 = new Vue({    el:'#bmsel',    data:{ mcs : [],            }});  </script>

//测试类public class test {private int id;//主键private String name;//名称private int pid;//父id,当为0时是顶级父类public int getId() {return id;}public String getName() {return name;}public int getPid() {return pid;}public void setId(int id) {this.id = id;}public void setName(String name) {this.name = name;}public void setPid(int pid) {this.pid = pid;}}
testurl查询的是pid为从页面传过去的值的集合，第一次是0，查询的是所有顶级父类，第二次会根据第一次select框选中的id到后台查询数据库中pid为该id的集合，三级联动以此类推
PS：发现空格和Tap缩进区别好大，习惯用tap缩进，复制到编辑器直接乱。以后要注意

阅读全文

0 0