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

2024-04-02 17:27:34

问题描述：

在使用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的