ElementUI中级联选择器的使用与外部数据的导入

        在ElementUI的官网中的数据都是自己写入的到javaScript中的固定的值：

        

         想要从外部进行导入，首先需要一个外部的数据源，就拿中国的各大城市区县地址来说，就有一个数据源如 地址数据源 点击下载文件 提取码为java 这是一个中国所有城市的数据源。

        下面我们直接复制官网的代码进行一系列的使用演示：

        

         其中value中存储的就是你选择的这些地址的value的值，也可以用它来定义级联选择器中的初始属性，也可以用来回显你当前选择的当前地址的具体位置；我们定义一个@change事件（@change="changeUserAddress"），用来获取修改或者选择后的属性；

<div id = "app"> 
    <el-form label-position="right" label-width="80px" :model="AddAddressInfo">
        <el-form-item label="收货地址">
                <template>
                    <div id="container">
                        <el-card>
                            <el-cascader
                                    v-model="value"
                                    :options="options"
                                    :props="{ expandTrigger: 'hover' }"
                                    @change="changeUserAddress"
                                    filterable
                            ></el-cascader>
                        </el-card>
                    </div>
                </template>
            </el-form-item>
     </el-form>
</div>

        首先我们通过import来引入数据，import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode，导入的模块都运行在严格模式下。import语句不能在嵌入式脚本中使用。在js文件中通过import引入另外的js文件，提示Uncaught SyntaxError: Unexpected string，或者Uncaught SyntaxError: Unexpected identifier错误，原因是import属于es6的语法，但是浏览器不支持es6语法，所以需要转换。因此在导入的语句中需要加上<script type="module"></script>，在这里面导入才能够成功，浏览器才支持；接下来我们来定义各级的选择器中对应的一些属性值，对应的父子级关系在定义完这些属性，构造出符合elementui中的格式数据之后，在调用vue中的一个函数created() 在html加载完成之前就调用这个构造数据的函数，而created函数与mounted 的函数时差不多类型的，但是都有一些区别其中created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。而mounted :在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些操作。文件存放格式如下：

<script type="module">
    import { cityInfo } from '../js/cityInfo.js'
    new Vue({
        el:"#app",
        data:{
            AddAddressInfo:{
                address:"",
            },
            options: {},
            // value 主要是用来设置默认值的
            /*这里面主要是用来存储选中的数据的*/
            value: [],
            /*主要用来存储数据源的*/
            cityInfo: cityInfo
        },
//        用来加载数据  将js文件中的数据转换成elementui需要的数据形式
        created() {
            this.getCascaderData()
        },
        methods:{
            getCascaderData: function () {
                const info = cityInfo

                this.options = info.map((v) => ({
//                   value是存储在绑定的数据里面的  也就是选择过后的值vaule:[]
//                   label则是显示在选择器上的值
//                   由于后端需要将选择的值传递回去，因此就将两个value和label都设置成城市的名
//                   字，便于选择和传递
                    value: v.name,
                    label: v.name,
                    children: v.districts.map((v2) => ({
                        value: v2.name,
                        label: v2.name,
                        children: v2.districts.map((v3) => ({
                            value: v3.name,
                            label: v3.name,
                            children: v3.districts.map((v4) => ({
                                value: v4.name,
                                label: v4.name
                            }))
                        }))
                    }))
                }))
            },
//        这里的value代表的就是前端选择的值
            changeUserAddress(value){
                var addAddress1 = "";
                for (var valueKey in value) {
                    addAddress1 += value[valueKey]
                }
                var _this = this;
//               这里就是将数据赋值给address  ，然后通过方法中的ajax的命令传给后端
                _this.AddAddressInfo.address = addAddress1;
            }
        },
        mounted(){
        }
    })

</script>

       选中后的value的值，因为后端是一个字符串的格式因此就将前端的数据进行处理后，传递给后端 value是一个数组，将其转换成字符串格式，输入的形式如下，将其传给后端，然后就可以进行赋值，修改。

        

 总的代码如下：

<div id = "app"> 
    <el-form label-position="right" label-width="80px" :model="AddAddressInfo">
        <el-form-item label="收货地址">
                <template>
                    <div id="container">
                        <el-card>
                            <el-cascader
                                    v-model="value"
                                    :options="options"
                                    :props="{ expandTrigger: 'hover' }"
                                    @change="changeUserAddress"
                                    filterable
                            ></el-cascader>
                        </el-card>
                    </div>
                </template>
            </el-form-item>
     </el-form>
</div>

<script type="module">
    import { cityInfo } from '../js/cityInfo.js'
    new Vue({
        el:"#app",
        data:{
            AddAddressInfo:{
                address:"",
            },
            options: {},
            // value 主要是用来设置默认值的
            /*这里面主要是用来存储选中的数据的*/
            value: [],
            /*主要用来存储数据源的*/
            cityInfo: cityInfo
        },
        created() {
            this.getCascaderData()
        },
        methods:{
            addUserAddress(){
                var _this = this;
                if (_this.AddAddressInfo.address !=null
                     && _this.AddAddressInfo.address !=''
                     ){
                    $.ajax({
                        url:"http://localhost:8080/chenUserAddress/addUserAddress",
                        dataType:"json",
                        type:"post",
                        data:_this.AddAddressInfo,
                        success:function (rs) {
                            if (rs.status == 200){
                                layer.alert(rs.msg,{icon:6},function () {
                                    // 关闭窗口
                                    var index = parent.layer.getFrameIndex(window.name);
                                    // 关闭窗口
                                    parent.layer.close(index);
                                    // 刷新
                                    parent.location.reload();
                                })
                            }else {
                                layer.alert(rs.msg,{icon:5},function () {
                                    // 关闭窗口
                                    var index = parent.layer.getFrameIndex(window.name);
                                    // 关闭窗口
                                    parent.layer.close(index);
                                    // 刷新
                                    parent.location.reload();
                                })
                            }
                        },error:function () {
                            _this.$message("修改用户地址服务器出错");
                        }
                    })
                }else if(_this.AddAddressInfo.address ==null || _this.AddAddressInfo.address == ''){
                    _this.$message("地址不能为空");
                }
            },
            getCascaderData: function () {
                const info = cityInfo

                this.options = info.map((v) => ({
                    value: v.name,
                    label: v.name,
                    children: v.districts.map((v2) => ({
                        value: v2.name,
                        label: v2.name,
                        children: v2.districts.map((v3) => ({
                            value: v3.name,
                            label: v3.name,
                            children: v3.districts.map((v4) => ({
                                value: v4.name,
                                label: v4.name
                            }))
                        }))
                    }))
                }))
            },
            changeUserAddress(value){
                var addAddress1 = "";
                for (var valueKey in value) {
                    addAddress1 += value[valueKey]
                }
                var _this = this;
                _this.AddAddressInfo.address = addAddress1;
            }
        },
        mounted(){

        }
    })

</script>