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");
                   });
           });