layui的select实现省市区级联

本来是一个很简单的思路，就是change事件触发查询，但是我这个页面（之前已经存在的）是融合了vue+layui导致原来的vue的语法在这里边不受用，例如简单的@change因为用了layui是监听不到的，只能用layui的方式去实现，并且我也不知道怎么回事，在layui的change事件里边竟然不能用axios，我真的是特别无语了……总是提示这个undefined那个undefined

百度N圈，各种方法试遍，总算找到了可以实现的方式，不把它整理出来，感觉都对不起自己，以后我自己写的页面是坚决不会把vue和layui融合在一起了，感觉还是vue+element更适合！

1、页面的html

            <div class="project-location">
                <div class="title">
                    <span>项目所在地:</span>
                </div>
                <div class="layui-form">
                    <div class="layui-input-inline">
                        <select ref="modules"
                                class="layui-form-select"
                                name="projectProvice"
                                lay-verify="required"
                                lay-filter="province"
                                lay-search>
                            <option value="">请选择省</option>
                            <option v-for="(type,index) in provinces" :value="type.dcode">{{type.distname}}</option>
                        </select>
                    </div>
                </div>
                <div class="cut-line">—</div>
                <div class="layui-form">
                    <div class="layui-input-inline">
                        <select ref="modules"
                                class="layui-form-select"
                                name="projectCity"
                                id="city"
                                lay-verify="required"
                                lay-filter="mycity"
                                lay-search>
                            <option value="0">请选择市</option>
                            <!--option v-for="(type,index) in cities" :value="type.dcode">{{type.distname}}</option> -->
                       </select>
                   </div>
                </div>
                <div class="cut-line">—</div>
                <div class="layui-form">
                   <div class="layui-input-inline">
                       <select ref="modules"
                               class="layui-form-select"
                               name="projectZone"
                               id="zone"
                               lay-filter="zone"
                               lay-verify="required"
                               lay-search>
                           <option value="0">请选择区</option>
                          <!--<option v-for="(type,index) in zones" :value="type.dcode">{{type.distname}}</option>-->
                       </select>
                   </div>
                </div>
            </div>

注意：这里省的option的赋值用的还是v-for，在页面mouted时查询出省级的数据，再layui render，市区的则是ajax查出数据之后再apend

2、在mouted()里边获取省级数据

this.axios.get("/qsmonitor/common/dist?pcode=")
               .then(res => {
                   this.provinces = res.data.data;
                   setTimeout(function() {
                       layui.form.render();
                   }, 10);
               });

3、选中省ajax获取市级数据

layui.form.on("select(province)", function (opt) {
               let pcode=opt.value;
               let $ = layui.jquery;
               layui.jquery.get("/qsmonitor/common/dist?pcode=" + pcode)
                   .then(res => {
                       //每次加载都要把之前选中的初始化
                       $("#city").empty();
                       $("#city").append(new Option("请选择市","0"));
                       $("#zone").empty();
                       $("#zone").append(new Option("请选择区","0"));
                       let tt = eval('(' + res + ')');
                       $.each(tt.data, function(key, val) {
                           $("#city").append(new Option(val.distname,val.dcode));
                       });
                       layui.form.render("select");
                   });
           });

4、选中市ajax获取区县数据

layui.form.on("select(mycity)", function (op) {
               let pd=op.value;
               let $ = layui.jquery;
               layui.jquery.get("/qsmonitor/common/dist?pcode=" + pd)
                   .then(res => {
                      $("#zone").empty();
                       $("#zone").append(new Option("请选择区","0"));
                      
                       let zz = eval('(' + res + ')');
                       $.each(zz.data, function(key, val) {
                           $("#zone").append(new Option(val.distname,val.pcode));
                       });

                       layui.form.render("select");
                   });
           });