您好!如果解决了,请点个采纳哦!大晚上的学这篇文章很累的......
在使用 avue-crud 实现表格时,可以通过 :before-submit
钩子函数在提交数据前对数据进行处理,这里我们可以在该钩子函数中添加代码实现新增数据后自动展开分级。
具体做法如下:
:before-submit
中获取新增加的数据。<avue-crud :before-submit="handleSubmit"></avue-crud>
// 在 methods 中定义 handleSubmit 方法
handleSubmit(data) {
// 获取新增加的数据(假设它有一个 id 和 parent_id 字段)
const { id, parent_id } = data
// 新增数据后自动展开分级(假设是通过 updateTree 方法展开分级)
this.$refs.crud.updateTree(parent_id, true)
// 返回处理后的数据
return data
}
updateTree
方法中通过 expandAll
属性来控制是否展开分级。<avue-crud ref="crud"></avue-crud>
// 在 methods 中定义 updateTree 方法
updateTree(parentId, expand) {
// 获取 Crud 组件的 $refs 对象
const crud = this.$refs.crud
// 获取 Crud 组件中的树形表格节点
const tree = crud.$refs['crud-table'].$refs.tree
// 根据 parentId 获取对应的节点
const node = tree.getNodeByKey(parentId)
// 如果节点存在,则展开分级
if (node) {
node.expanded = expand
node.parent?.expanded = expand
tree.setExpandedKeys([parentId])
}
}
以上代码中,我们通过获取 Crud 组件的 $refs 对象来访问它内部的树形表格节点,并通过 setExpandedKeys
方法将对应的节点展开或折叠。
希望这样的回答能够帮到您!