table树形结构

此树形结构配置只对生成页面生效,单独使用voltable的树形table,请参照:组件示例->table组件

树形结构配置方式一

配置适用于表数据较少,配置会加载全表数据;优点:配置简单、无后台代码、修改刷新页面后展开的节点保持不变

vue3 代码
const conInit=($vm)=> {
    gridRef=$vm;
    //隐藏分页信息
    gridRef.paginationHide = true;
    //禁用延迟加载(必填)
    gridRef.lazy = false;
    //树形结点的id字段(必填)
    gridRef.rowKey = 'DepartmentId';//DepartmentId为表的主键id字段
    //父级id字段(必填)
    gridRef.rowParentField = "ParentId";//ParentId为表的父级id字段
    //是否展开所有节点(默认会记录展开的节点)
    //gridRef.defaultExpandAll=true;
    //默认展开的节点
    //gridRef.expandRowKeys=["id值"]
}

隐藏高级查询按钮

树形结构配置方式二

此配置适用于表数据量大的情况(所有节点都是延迟加载的)

vue3 代码
//生成的vue标签上添加方法
<view-grid  :loadTreeChildren="loadTreeChildren"></view-grid>

const conInit=($vm)=> {
    gridRef=$vm;
   //设置treetable的唯一值字段(这个字段的值在表里面必须是唯一的)
    gridRef.rowKey = 'Role_Id'; //Role_Id换为表的主键字段
}
/***加载后台数据***/
const loadTreeChildren=(tree, treeNode, resolve)=>{
    //加载子节点
    //Role_Id换为表的主键字段
    let url = `api/表名/getTreeTableChildrenData?roleId=${tree.Role_Id}`;
    proxy.http.post(url, {}).then((result) => {
       resolve(result.rows);
    });
}