塔塔庙 2020-08-21 17:10 采纳率: 50%
浏览 1853
已采纳

vue使用element-ui开发Tree,后端直接返回所有节点的数据,但是显示不出lable

  1. vue使用element-ui开发Tree,后端直接返回所有节点的数据,但是显示不出lable

    图片说明

  2. 代码块

    <template>
    <tree :data="treedata" :props="defaultProps" :icon-class="icontype" show-checkbox @node-click="handleNodeClick"></tree>                           
    </template>
    <script>
    export default {
    data(){
        return{
            defaultProps: {
                label: 'label',
                children: 'children',
            },
            icontype:'android-apps',
            count: 1,
            treedata:[],
            father:[],     
        }
    },
    mounted() {
        this.computHeight();
        this.getDatatree();
    },
    methods:{
        //content高度
        computHeight() {
            this.contentHeight = this.documentClientHeight - 50 - 30 - 2 - 40 - 40
        },
        getDatatree(){
            this.params = {
                mgdept: "aircon"
            },
            this.$api.RelationTag.arealistTree(this.params).then(res => {
                console.log(res.code);
                if (res.code === 0) {
                    const data=JSON.parse(res.list);
                    this.treedata = data;
                    console.log(this.treedata);                   
                    for (let i = 0; i < this.treedata.length; i++) {
                        this.props.label.push(this.treedata[i].label);
                        this.props.children.push(this.treedata[i].children);
                    }                                 
                }
            }).catch(error => {
                //this.$Message.info(error);
            })
        },
        handleNodeClick(treedata) {
            console.log(treedata);
        },
    
                数据:
                [{"children":[{"children":[{"label":"4F"}],"label":"4#"},{"children":[{"label":"3F"}],"label":"3#"},{"children":[{"label":"2F"}],"label":"2#"},{"children":[{"label":"1F"}],"label":"1#"}],"label":"MAU"},{"children":[{"children":[{"label":"4F"}],"label":"4#"},{"children":[{"label":"3F"}],"label":"3#"},{"children":[{"label":"2F"}],"label":"2#"},{"children":[{"label":"1F"}],"label":"1#"}],"label":"FFU"},{"children":[{"children":[{"label":"4F"}],"label":"4#"},{"children":[{"label":"3F"}],"label":"3#"},{"children":[{"label":"2F"}],"label":"2#"},{"children":[{"label":"1F"}],"label":"1#"}],"label":"NMAU"},{"children":[{"children":[{"label":"4F"}],"label":"4#"},{"children":[{"label":"3F"}],"label":"3#"},{"children":[{"label":"2F"}],"label":"2#"},{"children":[{"label":"1F"}],"label":"1#"}],"label":"SJP"},{"children":[{"children":[{"label":"1F"}],"label":"1#"},{"children":[{"label":"4F"}],"label":"4#"},{"children":[{"label":"3F"}],"label":"3#"},{"children":[{"label":"2F"}],"label":"2#"}],"label":"GEX"},{"children":[{"children":[{"label":"4F"}],"label":"4#"},{"children":[{"label":"3F"}],"label":"3#"},{"children":[{"label":"2F"}],"label":"2#"},{"children":[{"label":"1F"}],"label":"1#"}],"label":"VOC"},{"children":[{"children":[{"label":"4F"}],"label":"4#"},{"children":[{"label":"3F"}],"label":"3#"},{"children":[{"label":"2F"}],"label":"2#"},{"children":[{"label":"1F"}],"label":"1#"}],"label":"AHU"},{"children":[{"children":[{"label":"3F"}],"label":"3#"},{"children":[{"label":"2F"}],"label":"2#"},{"children":[{"label":"4F"}],"label":"4#"},{"children":[{"label":"1F"}],"label":"1#"}],"label":"PGEX"}]
    
  3. 图片:

  • 写回答

4条回答 默认 最新

  • Nj. 2021-09-14 14:54
    关注

    img


    检查一下名字与设置一不一样

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 已采纳回答 10月22日

悬赏问题

  • ¥30 matlab appdesigner私有函数嵌套整合
  • ¥15 给我一个openharmony跑通webrtc实现视频会议的简单demo项目,sdk为12
  • ¥15 vb6.0使用jmail接收smtp邮件并另存附件到D盘
  • ¥30 vb net 使用 sendMessage 如何输入鼠标坐标
  • ¥15 关于freesurfer使用freeview可视化的问题
  • ¥100 谁能在荣耀自带系统MagicOS版本下,隐藏手机桌面图标?
  • ¥15 求SC-LIWC词典!
  • ¥20 有关esp8266连接阿里云
  • ¥15 C# 调用Bartender打印机打印
  • ¥15 我这个代码哪里有问题 acm 平台上显示错误 90%,我自己运行好像没什么问题