iview 做tree树结构3级结构，绑定模拟接口数据

iview 做（Tree）树结构3级结构，模拟接口数据

先上效果图：

后台接口数据返回是这个格式：

data2:[

{

"line": { "lineId": "02", "lineName": "2号线", "lineSname": null, "lineEname": null, "stationSName": null, "stationEName": null, "stationNum": 0, "openDate": null, "bulidCompany": null, "manageNodeid": "01010200100000001", "paProtocolId": "02" },

"stationInfo": [

{

"stationInfo": { "tccStationId": "0218", "stationSname": "积水潭", "stationFname": "积水潭", "stationEname": "Jishuitan",                                       "tccLineId": "02", "paProtocolId": "0218", "tccLineName": null, "subareaNum": 0, "openMark": 0,                                                     "changeLineNum": 0, "changeLineName": null },

"deviceList": [

                         { "deviceId": "06010201199010125", "deviceName": "测试01", "model": 6291457 },

                         { "deviceId": "06600201199010123", "deviceName": "服务器01", "model": 6291457 },

                         { "deviceId": "06610201199010124", "deviceName": "交换机01", "model": 6356993 }

                   ]

}

    ]

}

],

主要绑定数据的方法：

具体代码如下：

<template>
    <!-- 设备状态 -->
    <div class="device">
        <Row>
            <Col span="4">
                <Tree :data="data1" @on-select-change="select_change"></Tree>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
        data () {
            return { 
                data1: [
                    {
                        title: '1号线',
                        expand: true,
                        children: [
                            {
                                title: '预留01站',
                                expand: true,
                                children:[
                                    {
                                        title:'设备01'
                                    },
                                    {
                                        title:'设备02'
                                    }
                                ]
                            },
                            {
                                title: '预留02站',
                                expand: true,
                                children:[
                                    {
                                        title:'设备03'
                                    },
                                    {
                                        title:'设备04'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        title: '2号线',
                        expand: false,
                        children: [
                            {
                                title: '西直门站',
                                expand: true,
                                children:[
                                    {
                                        title:'性能01'
                                    },
                                    {
                                        title:'性能02'
                                    }
                                ]
                            },
                            {
                                title: '车公庄站',
                                expand: true,
                                children:[
                                    {
                                        title:'性能03'
                                    },
                                    {
                                        title:'性能04'
                                    }
                                ]
                            }
                        ]
                    },
                ],
                data2:[ 
                        { 
                            "line": { "lineId": "02", "lineName": "2号线", "lineSname": null, "lineEname": null, "stationSName": null, "stationEName": null, "stationNum": 0, "openDate": null, "bulidCompany": null, "manageNodeid": "01010200100000001", "paProtocolId": "02" }, 
                            "stationInfo": [ 
                                { 
                                "stationInfo": { "tccStationId": "0218", "stationSname": "积水潭", "stationFname": "积水潭", "stationEname": "Jishuitan", "tccLineId": "02", "paProtocolId": "0218", "tccLineName": null, "subareaNum": 0, "openMark": 0, "changeLineNum": 0, "changeLineName": null }, 
                                "deviceList": [ 
                                    { "deviceId": "06010201199010125", "deviceName": "测试01", "manageNodeid": "01010201100000000", "ip": "192.168.25.51", "port": 200, "deviceType": "1", "useStatus": "1", "lineId": "02", "lineName": "2号线", "stationId": "0218", "stationName": "积水潭", "broadcastareaId": "040218001", "createuserid": "07200100100001002", "createusername": "admin02", "lastmodifytime": "2019-05-21 10:00:25", "model": 6291457 }, 
                                    { "deviceId": "06600201199010123", "deviceName": "服务器01", "manageNodeid": "01010201100000000", "ip": "192.168.25.51", "port": 200, "deviceType": "60", "useStatus": "1", "lineId": "02", "lineName": "2号线", "stationId": "0218", "stationName": "积水潭", "broadcastareaId": "040218001", "createuserid": "07200100100001002", "createusername": "admin02", "lastmodifytime": "2019-05-20 17:23:01", "model": 6291457 }, 
                                    { "deviceId": "06610201199010124", "deviceName": "交换机01", "manageNodeid": "01010201100000000", "ip": "192.168.25.51", "port": 200, "deviceType": "61", "useStatus": "1", "lineId": "02", "lineName": "2号线", "stationId": "0218", "stationName": "积水潭", "broadcastareaId": "040218001", "createuserid": "07200100100001002", "createusername": "admin02", "lastmodifytime": "2019-05-20 17:23:21", "model": 6356993 } 
                                    ] 
                                }
                            ] 
                        } 
                    ],
            }
        },
        methods: {
            select_change(data) {
                console.log("data单选：",data);
                if (!data[0].tccStationId) return false; //如果线路下的某个车站不存在
              
            },
        },
        created(){
            let tree = [];
                        this.data2.map(v=>{
                            let _tempTree = {};
                            _tempTree.title = v.line.lineName;
                            // _tempTree.expand = true; // 线路里面的车站会展开
                            _tempTree.children = [];
                            if (!v.stationInfo) return false; //如果v.stationInfo为 null 直接return
                            v.stationInfo.map(station=>{
                                let _tempStation = {
                                    'title':station.stationInfo.stationSname,
                                    'tccStationId':station.stationInfo.tccStationId,
                                    'linId':v.line.lineId
                                };
                                    _tempStation.children = []
                                //当设备的数组存在时，执行
                                if( station.deviceList.length > 0) {
                                    station.deviceList.map(device => {
                                        let _tempDevice = {
                                            'title': device.deviceName,
                                            "deviceId": device.deviceId,
                                            'model': device.model,
                                        }
                                        _tempStation.children.push(_tempDevice)
                                    })

                                }

                                _tempTree.children.push(_tempStation)
                            })
                            tree.push(_tempTree)
                        })
                        this.data1 = tree
        },
        mounted(){
        },
        destroyed() {
        },
    }
</script>

<style type="text/css">
.device{width: 100% !important;max-height:100%;}
.device .ivu-col-span-4 {height: 520px !important;overflow-y: scroll;border:1px solid #dddee1;background:#fff;padding:10px 20px;}
</style>

 

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140