C# Vue TreeSelect 的树形控件的节点加载问题,如何去掉节点前面的小三角.

16 篇文章 0 订阅

C# Vue TreeSelect 的树形控件的节点加载问题,如何去掉节点前面的小三角.

主要是利用了C# List 的 dynamic 类型.


    public ActionResult AjaxLoadAllDepartments()
     {

         var tree = cache.GetCache<List<dynamic>>("AllDepartmentsTree");
         if (tree ==null)
         {
             var DB = new DbHelp.Base.DbBase<SysDepartmentInfo>();
             SysDepartmentInfo[] all = DB
                       .AsQueryable()
                       .Where(a=>a.UseFlag == 1)
                       .OrderBy(x => x.SortCode)
                       .ToArray();
             tree = GetChildMenu(all, "0");
             
             cache.SetCache("AllDepartmentsTree", tree);
         }

         return Json(new AjaxResponse() {
             Data = tree,
             Success =true
         });
     }

     /// <summary>
     /// 获取子菜单
     /// </summary>
     private List<dynamic> GetChildMenu(SysDepartmentInfo[] cacheAllDeptList, string ParentId)
     {
         var childs = new List<dynamic>();
         foreach (var item in cacheAllDeptList)
         {
             if (item.ParentDepartmentID== ParentId)
             {
                 var children = GetChildMenu(cacheAllDeptList, item.DepartmentID);
                 //dynamic node = new System.Dynamic.ExpandoObject();

                 if (children == null || children.Count == 0)
                 {
                     var node = new Vue_TreeSelectLeafNode();
                     node.id = item.DepartmentID;
                     node.label = item.DepartmentName;
                     node.children = children;//这样不会有个小三角
                     childs.Add(node);
                 } else {

                     var node = new Vue_TreeSelectNode();
                     node.id = item.DepartmentID;
                     node.label = item.DepartmentName;
                     node.children = children;//这样会有个小三角
                     childs.Add(node);
                 }
                
             }
         }
         return childs; 
     }

 }

 /// <summary>
 /// 有子节点的分支节点
 /// </summary>
 public class Vue_TreeSelectNode : Vue_TreeSelectLeafNode
 { 
     public List<dynamic> children { get; set; }  //有这个属性就会有小三角
 }

 
 /// <summary>
 /// 叶子节点
 /// </summary>
 public class Vue_TreeSelectLeafNode
 {
     /// <summary>
     /// 
     /// </summary>
     public string id { get; set; }//: 'a',

     /// <summary>
     /// 标签
     /// </summary>
     public string label { get; set; }

     public bool isDefaultExpanded { get; set; }
     public bool isDisabled { get; set; } 
 }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3Ant-Design-VueTree组件的用法与Vue2有些不同。以下是示例代码: ```html <template> <a-tree :tree-data="treeData" :draggable="true" :block-node="true" :show-line="true" :default-expanded-keys="defaultExpandedKeys" v-model:selected-keys="selectedKeys" @select="onSelect"> <template #title="{ key, title }"> <span> {{ title }} <a @click.stop="addNode(key)">Add</a> <a @click.stop="removeNode(key)">Delete</a> </span> </template> </a-tree> </template> <script> import { ref } from 'vue' export default { setup() { const treeData = ref([ { title: 'Parent 1', key: '0-0', children: [ { title: 'Child 1', key: '0-0-0' }, { title: 'Child 2', key: '0-0-1' } ] } ]) const defaultExpandedKeys = ref(['0-0']) const selectedKeys = ref([]) const addNode = (parentKey) => { const newNode = { title: 'New Node', key: `${parentKey}-${treeData.value.length}` } const parentNode = treeData.value.find(node => node.key === parentKey) if (!parentNode.children) { parentNode.children = [] } parentNode.children.push(newNode) treeData.value = [...treeData.value] } const removeNode = (key) => { const parentKey = key.split('-').slice(0, -1).join('-') const parentNode = treeData.value.find(node => node.key === parentKey) parentNode.children = parentNode.children.filter(node => node.key !== key) treeData.value = [...treeData.value] } const onSelect = (selectedKeys) => { console.log(selectedKeys) } return { treeData, defaultExpandedKeys, selectedKeys, addNode, removeNode, onSelect } } } </script> ``` 这个示例与Vue2的示例类似,只是我们使用了Vue3的Composition API来编写代码。我们使用了ref函数来创建响应式变量。在addNode和removeNode方法,我们使用了Vue3的响应式API来更新数据。当我们改变treeData的值,我们必须通过解构赋值来创建一个新的数组来触发更新。注意,在Vue3,我们使用v-model来绑定selected-keys。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值