在vue中用avue-crud 做表格,需要在新增数据后自动展开分级

img


当新增型号成功后,自动展开当前分级;这个功能得怎么做,求解答

您好!如果解决了,请点个采纳哦!大晚上的学这篇文章很累的......

在使用 avue-crud 实现表格时,可以通过 :before-submit 钩子函数在提交数据前对数据进行处理,这里我们可以在该钩子函数中添加代码实现新增数据后自动展开分级。

具体做法如下:

  1. 首先,在 :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
}
  1. 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 方法将对应的节点展开或折叠。

希望这样的回答能够帮到您!