TDesign TreeSelect一次性加载所有数据并展开所有节点
后台（ASP.NET Core，目标框架.net 7，除FreeSql外，用到包WinReal.Base）
前端（TDesign Starter 0.7.2 + vue 3.2.45）
控件（TDesign TreeSelect控件）
对应数据结构
public class Dept
{
[Column(IsIdentity = true, IsPrimary = true)]
public int DeptId { get; set; }
public string DeptName { get; set; } = "";
public int ParentId { get; set; } //父级DeptId
public int OrderId { get; set; } //当前节点完整子树起始，本身节点次序值
public int MaxOrderId { get; set; } //当前节点完整子树最后一个节点的次序值
public int Depth { get; set; } //当前节点所在深度，TDesign中用不到
}
1.后端传递数据的模型
public class TreeNode
{
public string Value { get; set; } = "";
public string Label { get; set; } = "";
public List<TreeNode>? Children { get; set; }
}
2.后端递归取整表数据
public Result<List<TreeNode>> GetDeptTreeNodes()
{
Result<List<TreeNode>> result = new();
List<TreeNode>? kids = DeptGetKids(0);
if (kids == null)
{
result.Err("没有部门数据");
}
else
{
result.Data = kids;
}
return result;
}
private List<TreeNode>? DeptGetKids(int parentId)
{
TestLog("parentId = " + parentId.ToString());
List<TreeNode> nodes = new List<TreeNode>();
var depts = _fsql.Select<Dept>().Where(a => a.ParentId == parentId).OrderBy(a => a.OrderId).ToList();
TestLog(JsonSerializer.Serialize(depts));
foreach (Dept dept in depts)
{
TestLog(dept.DeptName);
if (dept.OrderId == dept.MaxOrderId)
{
nodes.Add(new TreeNode { Value = dept.DeptId.ToString(), Label = dept.DeptName });
}
else
{
nodes.Add(new TreeNode { Value = dept.DeptId.ToString(), Label = dept.DeptName, Children = DeptGetKids(dept.DeptId) });
}
}
return nodes;
}
3.前端一次性加载所有数据
①api接口：src\api\model\basicinfoModel.ts
export interface TreeNodeModel {
value: string;
label: string;
children?: Array<TreeNodeModel>;
}
②api接口：src\api\basicinfo.ts
const Api = {
DeptTreeNodes: '/BasicInfo/GetDeptTreeNodes',
};
export function getDeptTreeNodes() {
return request.get({
url: Api.DeptTreeNodes,
});
}
③vue文件template
<t-tree ref="tree" :data="items" checkable hover expand-all :lazy="false" />
④vue文件setup script
import { onMounted, ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { getDeptTreeNodes } from '@/api/basicinfo';
import { TreeNodeModel } from '@/api/model/basicinfoModel';
const depts = ref<Array<TreeNodeModel>>([]);
onMounted(async () => {
depts.value = await getDept();
});
// 从api取所有部门的数据
const getDept = async () => {
try {
const result = await getDeptTreeNodes();
return result;
} catch (error) {
MessagePlugin.error(error.message || '获取部门数据失败，请稍后再试');
return [];
}
};
