省市区三级联动，使用vue.js的v-for语句动态添加layui的选择框选项后，无法正常显示的解决办法

问题原因：

表单元素是动态添加的，并没有重新渲染

官方也说明了需要主动进行组件渲染才能正常显示

 我们可以看到数据其实已经添加到原生的select组件之下了，但是并没有显示到layui的下拉框下

可以看到渲染出来的dl下的dd只有一个选项

解决办法：

前端代码，使用v-for循环ProvinceInfos，添加<option></option>选项

<div class="choose" id="Three_link">
    <select>
        <option value="" disabled>省</option>
        <option v-for="item in ProvinceInfos" :value="item.areaName">
             {{item.areaName}}
        </option>
    </select>
</div>

vue.js代码 

        let form = layui.form

        //加载省市区
        new Vue({
            el: "#Three_link",
            data: {
                ProvinceInfos: [],
                CityInfos: [],
                TownInfos: []
            },
            mounted:  function () {
                 this.getProvince()
            },
            methods: {
                getProvince() {
                    axios.get("/Area/pro").then(res => {
                        if (res.data.code == 200 && res.status == 200) {
                            this.ProvinceInfos = res.data.data;
                            form.render('select') //重要！
                        }
                    })
                }

            }

        });

 搞定！

注

1、这里要注意el的作用范围，不要发生嵌套，不然会提示以下错误：

如果实在有嵌套关系

建议new Vue不要分开，不要用两个vue

或者直接分开放在同一层级

2、form的定义要写在js代码的外面，不然达不到渲染的效果

如下，不能正常渲染组件

//加载省市区
new Vue({
    el: "#Three_link",
    data: {
        ProvinceInfos: [],
        CityInfos: [],
        TownInfos: []
    },
    mounted: function () {
        this.getProvince()
    },
    methods: {
        getProvince() {
            axios.get("/Area/pro").then(res => {
                if (res.data.code == 200 && res.status == 200) {
                    this.ProvinceInfos = res.data.data;
                    let form = layui.form
                    form.render('select')
                }
            })
        }
    }

});