- N +

element组件之级联选择器(接收后台数据,渲染、封装)

原标题:element组件之级联选择器(接收后台数据,渲染、封装)

导读:

使用级联组件HTML代码:<el-cascader :options="officeName"   &nb...

文章目录 [+]

使用级联组件

image.png

HTML代码:

<el-cascader :options="officeName"
             :show-all-levels="false"
             size="small"
             change-on-select
             clearable
             v-model="officeName.value"
             expand-trigger="hover"
>

</el-cascader>

js代码(封装前的写法):

<script type="text/babel">
    var app = new Vue({
        el: '#app',
        data(){
            return{
                officeName:[],// 默认定位城镇
            }

        },
        methods:{
            locationTowns(){
                $.ajax({
                    dataType: 'json',
                    type: 'get',
                    url: '${ctx}/a/govt/user/area/list',
                    success: function (res) {
                        if (res.code != 0) {
                            return;
                        }
                        // app.officeName = res.data
                        res.data.forEach(function(item){
                             let obj = {}
                             obj.label = item.nodeName
                             obj.value = item.id
                             if(item.childSet.length != 0){
                                 obj.children = []
                                 item.childSet.forEach(function(item1){
                                     let obj1 = {}
                                     obj1.label = item1.nodeName
                                     obj1.value = item1.id
                                     obj.children.push(obj1)
                            
                                 })
                             }
                            app.officeName.push(app.addTowns(item))

                        })
                        // console.log(app.officeName);
                    }
                });

            },
        },
        created() {
            this.locationTowns() 
        },
        mounted() {
           
        }
    })
</script>

js代码(封装后的写法):

<script type="text/babel">
    var app = new Vue({
        el: '#app',
        data(){
            return{
                officeName:[],
            }

        },
        methods:{
            // 获取默认定位城镇
            locationTowns(){
                $.ajax({
                    dataType: 'json',
                    type: 'get',
                    url: '${ctx}/a/govt/user/area/list',
                    success: function (res) {
                        if (res.code != 0) {
                            return;
                        }
                        // app.officeName = res.data
                        res.data.forEach(function(item){
                            app.officeName.push(app.addTowns(item))

                        })
                        // console.log(app.officeName);
                    }
                });

            },
            addTowns(item){
                let obj = {}
                obj.label = item.nodeName
                obj.value = item.id
                if(item.childSet.length != 0){
                    obj.children = []
                    item.childSet.forEach(function(item1){
                    obj.children.push(app.addTowns(item1))


                })
            }
            return obj
          },
        },
        created() {
            this.locationTowns() 
        },
        mounted() {
            
        }
    })
</script>

后台返回数据:

{
    "code":0,
    "msg":"返回成功",
    "data":[
        {
            "id":"402880d068946178016894646b6d0044",
            "dataState":"NORMAL",
            "remark":null,
            "parentIds":"402880d06894617801689462016a0012,402880d0689461780168946384e9002c",
            "nodeName":"博罗县",
            "seq":0,
            "childSet":[ 
                {
                    "id":"402880d0694bf7b701694bf97f1b0010",
                    "dataState":"NORMAL",
                    "remark":null,
                    "parentIds":"402880d06894617801689462016a0012,402880d0689461780168946384e9002c,402880d068946178016894646b6d0044",
                    "nodeName":"横河镇",
                    "seq":0,
                    "childSet":[

                    ],
                    "level":4,
                    "code":"441322123000",
                    "fullName":"中国,广东,惠州,博罗,横河镇",
                    "zipCode":"516107",
                    "pinyin":"Henghe",
                    "jianpin":"HH",
                    "firstChar":"H",
                    "lng":"114.28971",
                    "lat":"23.17314",
                    "levelName":"广东省-惠州市-博罗县-横河镇",
                    "new":false
                },
                {
                    "id":"402880d0694bf7b701694bf97f5e0011",
                    "dataState":"NORMAL",
                    "remark":null,
                    "parentIds":"402880d06894617801689462016a0012,402880d0689461780168946384e9002c,402880d068946178016894646b6d0044",
                    "nodeName":"罗浮山管委会",
                    "seq":0,
                    "childSet":[

                    ],
                    "level":4,
                    "code":"441322570000",
                    "fullName":"中国,广东,惠州,博罗,罗浮山管委会",
                    "zipCode":"516108",
                    "pinyin":"Luofushan",
                    "jianpin":"LFS",
                    "firstChar":"L",
                    "lng":"114.28972",
                    "lat":"23.17315",
                    "levelName":"广东省-惠州市-博罗县-罗浮山管委会",
                    "new":false
                }
            ],
            "level":3,
            "code":"441322",
            "fullName":"中国,广东,惠州,博罗",
            "zipCode":"516100",
            "pinyin":"Boluo",
            "jianpin":"BL",
            "firstChar":"B",
            "lng":"114.28964",
            "lat":"23.17307",
            "levelName":"广东省-惠州市-博罗县",
            "new":false
        }
    ]
}


有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

1

0
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共523人参与)参与讨论

    还没有评论,来说两句吧...