TDesign TreeSelect一次性加載所有數(shù)據(jù)并展開所有節(jié)點
后臺（ASP.NET Core，目標(biāo)框架.net 7，除FreeSql外，用到包WinReal.Base）
前端（TDesign Starter 0.7.2 + vue 3.2.45）
控件（TDesign TreeSelect控件）
對應(yīng)數(shù)據(jù)結(jié)構(gòu)
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; } //當(dāng)前節(jié)點完整子樹起始，本身節(jié)點次序值
? ? public int MaxOrderId { get; set; } //當(dāng)前節(jié)點完整子樹最后一個節(jié)點的次序值
? ? public int Depth { get; set; } //當(dāng)前節(jié)點所在深度，TDesign中用不到
}
1.后端傳遞數(shù)據(jù)的模型
public class TreeNode
? ? {
? ? ? ? public string Value { get; set; } = "";
? ? ? ? public string Label { get; set; } = "";
? ? ? ? public List<TreeNode>? Children { get; set; }
? ? }
2.后端遞歸取整表數(shù)據(jù)
public Result<List<TreeNode>> GetDeptTreeNodes()
? ? ? ? {
? ? ? ? ? ? Result<List<TreeNode>> result = new();
? ? ? ? ? ? List<TreeNode>? kids = DeptGetKids(0);
? ? ? ? ? ? if (kids == null)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? result.Err("沒有部門數(shù)據(jù)");
? ? ? ? ? ? }
? ? ? ? ? ? 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.前端一次性加載所有數(shù)據(jù)
①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取所有部門的數(shù)據(jù)
const getDept = async () => {
? try {
? ? const result = await getDeptTreeNodes();
? ? return result;
? } catch (error) {
? ? MessagePlugin.error(error.message || '獲取部門數(shù)據(jù)失敗，請稍后再試');
? ? return [];
? }
};
