:tree-props=“{children: ‘children‘}“ 不回显数据

本文探讨了在Element UI中使用<el-table>组件处理树形数据时遇到的问题,重点在于如何调整后端返回的实体类,确保List类型的children属性正确显示。通过实例说明了如何适配List结构以便数据能正常回显。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

elementui中
<el-table
        :data="tableData"
        style="width: 100%"
        v-loading="ctrl.loading"
        border
        row-key="id"
        :tree-props="{children: 'children'}"
        :default-expand-all="false">

:tree-props="{children: 'children'}"不回显数据:

后端的代码中定义的实体类中应该是:

List类型的数据才能传递给children

赋值:

 

 

<el-form-item label="课程分类" prop="categoryId"> <el-select v-model="data.form.categoryId" placeholder="请选择分类" style="width: 240px" @visible-change="handleSelectVisible" clearable > <el-option style="height: auto; padding: 0"> <el-tree ref="categoryTree" :data="data.categoryTree" :props="treeProps" node-key="id" :highlight-current="true" :expand-on-click-node="false" @node-click="handleNodeClick" style="width: 100%; max-height: 300px; overflow: auto" > <template #default="{ node, data }"> <span :class="{ 'disabled-node': node.childNodes.length > 0 }"> {{ data.title }} <span v-if="node.childNodes?.length" style="color: #999; font-size: 12px; margin-left: 5px" > ({{ node.childNodes.length }}) </span> </span> </template> </el-tree> </el-option> <template #empty> <div style="padding: 10px"> {{ data.categoryTree.length ? '加载中...' : '暂无分类数据' }} </div> </template> </el-select> </el-form-item>// 新增选择框可见性处理 const handleSelectVisible = (visible) => { if (visible && data.categoryTree.length === 0) { loadCategoryTree() } } // 修改分类加载方法 const loadCategoryTree = () => { request.get('/category/tree').then(res => { if (res.code === '200') { data.categoryTree = processTreeData(res.data || []) } else { ElMessage.error(res.msg) } }).catch(err => { ElMessage.error('分类加载失败') }) } // 处理树形数据 const processTreeData = (tree) => { const addEmptyChildren = (nodes) => { return nodes.map(node => ({ ...node, children: node.children?.length ? addEmptyChildren(node.children) : undefined })) } return addEmptyChildren(tree) } // 树节点点击处理 const handleNodeClick = (nodeData, node) => { // 只有当节点是叶节点时才更新值 if (!node.childNodes || node.childNodes.length === 0) { data.form.categoryId = nodeData.id // 生成父路径 const parentIds = [] let current = node.parent while (current && current.data.id !== undefined) { parentIds.unshift(current.data.id) current = current.parent } data.form.categoryParentId = parentIds.join(',') // 关闭下拉框 document.querySelector('.el-select-dropdown').style.display = 'none' } }可以点击了之后,为什么选中之后出现的是数字id而是分类名称title
03-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值