ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

element-ui树形数据不显示展开图标解决方案

2021-10-28 19:33:07  阅读:196  来源: 互联网

标签:element dict 版本 ui 图标 response row


问题描述:

在使用element-ui的下图组件时,出现有子节点的记录不能显示展开的图标

在这里插入图片描述
相关代码:

<template>
    <div class="app-container">
        <el-table
        :data="list"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="getChildrens"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column label="名称" width="230" align="left">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>

            <el-table-column label="编码" width="220">
                <template slot-scope="{row}">
                        {{ row.dictCode }}
                </template>
            </el-table-column>
            <el-table-column label="值" width="230" align="left">
            <template slot-scope="scope">
            <span>{{ scope.row.value }}</span>
            </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
            </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import dict from '@/api/cmn/dict'
export default {
    data() {
        return {
            list:[] //数据字典列表数组
        }
    },
    created() {
        this.getDictList(1)
    },
    methods: {
        //数据字典列表
        getDictList(id) {
            dict.dictList(id)
                .then(response => {
                    this.list = response.data
                })
        },
        getChildrens(tree, treeNode, resolve) {
            dict.dictList(tree.id).then(response => {
                resolve(response.data)
            })
        }
    }
}
</script>

原因分析:

1.根据后台响应的数据,hasChildren是true,是有子节点的,但是前端页面却没有显示展开图标,排除后台程序
在这里插入图片描述
2、然后跑去官网cv过来再次修改
在这里插入图片描述
排除前端代码问题
3、清楚缓存,再重启,也没有解决,排除缓存
4、在准备撂挑子的时候看见了版本,看了几个低版本和高版本发现,2.7.2以前的版本是没有这个组件的,再查看自己使用的版本,果不其然2.4的
在这里插入图片描述


解决方案:

  • 卸载之前的低版本
npm uninstall element-ui 
  • 下载最新版本
npm install element-ui@2.15.6 

在这里插入图片描述

解决收工

标签:element,dict,版本,ui,图标,response,row
来源: https://blog.csdn.net/weixin_53285159/article/details/121020788

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有