tree

树组件

基本用法

<template>
    <dn-page>      
      <dn-form ref="formRef" v-bind="formOptions"></dn-form>    
    </dn-page>   
  </template>
  
<script lang="jsx">
import {ref,defineComponent} from "vue";
import {   dn, useForm } from "@sdevnet/devnet-form";

const formRef = ref();
const formOptions = ref();

const treeData= [
              {
                  text:'下拉框1',
                  id:'1', 
                  name:'abc',
                  children:[{
                    text:'下拉框1_1',
                    id:'1_1',
                    children:[
                        {
                          text:'下拉框1_1_1',
                          id:'1_1_1',
                          value:'1_1_1'
                      }
                    ]
                  }]
              },
              {
                text:'下拉框2',
                  id:'2',
                  children:[{
                    text:'下拉框2_1',
                    id:'2_1',
                    children:[
                        {
                          text:'下拉框2_1_1',
                          id:'2_1_1',
                      },
                        {
                          text:'下拉框2_1_2',
                          id:'2_1_1'
                        },
                        {
                          text:'下拉框2_1_3',
                          id:'2_1_1'
                        },
                        {
                          text:'下拉框2_1_4',
                          id:'2_1_1'
                        }                        
                    ]
                  }]
              }                
            ];

function createFormOptions() {
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {        
      fn9: {
        type: "tree",
        form: {         
          col:{span:24},         
          component:{
            onNodeContextmenu:(event,data,node,nodeComponent)=>{
              //右键
              console.log(event,data,node,nodeComponent);
            }
          },
          props:{ 
            expandLevel:2,  //展开第二级
            showFilter:true,
            
            request:{
              filterMethod:(val,data)=>{
                return data.text.includes(val);
              }, 
            } ,         
            data:treeData,
            events:{           
              onChange:(scope)=>{
                if(scope.$event?.selectedOptions?.length>0){
                    dn.notification.success(scope.$event?.selectedOptions[0]?.text)
                }               
                console.log('out',scope);
              }
            }        
          }            
        }
      },
      fnhr:{
        type:'split',
        form:{
            props:{
                text:'带复选框'
            }
        }
      },
      fn10: {
        type: "tree",
        form: {         
          col:{span:24},    
          component:{
            'show-checkbox':true,
            'default-checked-keys':['2_1'],
            'check-strictly':true
          },     
          props:{ 
            expandLevel:2,            
            data:treeData,
            events:{           
                onCheck:(checkNodes,curNode)=>{
                  console.log('out check',checkNodes,curNode);
               }
            }        
          }            
        }
      }
    }
  });
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid:1,fn1:null};

  return {
    formOptions,   
    formRef
  };
}

export default defineComponent({
  setup() {
    return {
      ...initFormOptions()
    };
  }
});
</script>

一般树作为左右联动布局，参考分组容器Layout

tree API

PropsName	Description	Type	Default
key	字段名称子组件column配置	json
└ title	标题	string
└ type	tree	string
└ form	表单栏位配置	json
└└ col	el-col配置，参考原生组件	json
└└ component	原生组件属性	json
└└└ default-checked-keys	默认勾选项value	array
└└└ check-strictly	复选框时父子节点是否不关联	boolean	false
└└└ draggable	是否启用拖动	boolean	false
└└└ onNodeDrop	拖动完成后的事件	func
└└└ key	参考原生el组件
└└ props	组件属性	json
└└└ valueMember	树项值字段	string	id
└└└ textMember	树项文本字段	string	text
└└└ childrenMember	项子节点key(固定children)	string	children
└└└ showCheckbox	是否显示复选框	boolean	false
└└└ showLine	是否显示节点树结构线	boolean	true
└└└ contextMenu	右键菜单
└└└ data	数据	array
└└└└ json	选项json
└└└ events	组件事件	json
└└└└ onChange	点击节点触发
└└└└ onCheck	点击复选框触发
└└└└ onNodeContextmenu	右击节点触发

tree 事件

Name	Description
原生事件	component下写事件，参考原生组件事件

tree Exposes

Name	Description
ctlRef	原生组件引用