使用fast-crud element-plus vue 版本实现 树形表格

项目需求

实现树形折叠表格 效果如下图

技术栈：fast-crud（element版本） Vue3
查看 官方示例项目代码 （去官网找到源码地址 克隆 安装依赖运行 找到对应需求）
官方示例代码

遇到问题

如上图配置后没有生效 下述为具体的代码配置

      table: {
        lazy: true,
        load: async (row: any, treeNode: unknown, resolve: (date: any[]) => void) => {
          //懒加载，更新和删除后，需要刷新父节点的状态，见上方
          const obj = await api.GetObj(row.id);
          resolve([...obj.children]);
        }
      },

tips：遇到小问题，表格最后一级展开 ，数据会顶格向左显示 只需调整宽度即可

	columns: {
				code: {
					title: '知识点编码',
					search: {
						show: true,
					},
					type: 'input',
					//  --------------开始--------------
					column: {
						width: '300px',
					},
					// --------------结束--------------
					form: {
						show: false,
						disabled: true,
						component: {
							placeholder: '请输入知识点编码',
						},
					},
				}
			}

如何解决

查看示例的数据格式

const list = [
  {
    radio: "1",
    data: "我会懒加载",
    time: "2020-01-01 11:11:11",
    province: "wh",
    amount: 100,
    hasChildren: true,
    loaded: false,
    children: [
      {
        data: "懒加载的子数据",
        province: ["sh", "gz"],
        time: "2020-01-01 11:11:11",
        amount: 100,
        hasChildren: false,
        parentId: 1
      },
      {
        data: "懒加载的子数据2",
        province: ["sh", "sz"],
        time: "2020-01-01 11:11:11",
        amount: 100,
        hasChildren: false,
        parentId: 1
      }
    ]
  },
  {
    data: "data2",
    province: "sh",
    time: "2020-01-01 11:11:11",
    amount: 100,
    children: [
      {
        id: 999,
        data: "data1_1",
        time: "2020-01-01 11:11:11",
        province: ["gz", "sz"], // 可以逗号分隔的字符串 'gz,sz'
        amount: 100,
        children: [
          {
            id: 1000,
            data: "data1_1_1",
            time: "2020-01-01 11:11:11",
            province: ["sz", "gz"], // 可以逗号分隔的字符串 'gz,sz'
            amount: 100
          }
        ]
      },
      {
        id: 888,
        data: "data1_2",
        time: "2020-01-01 11:11:11",
        province: "sh",
        amount: 100,
        children: [
          {
            id: 889,
            data: "data1_2_1",
            time: "2020-01-01 11:11:11",
            province: "gz",
            amount: 100
          }
        ]
      }
    ]
  },
  {
    data: "data3",
    province: ["sh", "gz"],
    time: "2020-01-01 11:11:11",
    amount: 100
  },
  {
    data: "data4",
    province: ["sh", "sz"],
    time: "2020-01-01 11:11:11",
    amount: 100
  }
]

查看服务器数据返回数据格式不一致 修改数据格式为 fast-crud框架所需的数据格式 修改如下

table: {
				lazy: true,
				children: 'children',
				hasChild: 'hasChildren',
				load: async (row: any, treeNode: unknown, resolve: (date: any[]) => void) => {
					//懒加载，更新和删除后，需要刷新父节点的状态，见上方
					return request({
						url: '/api/Config/KnowledgePointSet/',
						method: 'get',
						params: { pcode: row.code, limit: 999 },
					}).then((ret: any) => {
					//  这里是  pcode_count 字段判断有没有下一级的数据 根据实际情况修改
						ret.data.map((value: any) => {
							value.hasChildren = value.pcode_count !== 0;
						});
						row.hasChildren = false;
						//  ！！！很重要 需要resolve 返回服务器获取的数据 不返回树形数据不会显示的
						resolve(ret.data);
					});
				},

				iconLoaded: 'el-icon-loading', // 美化loading图标
			},

配置说明