tree（树）

基础用法

示例：

代码示例：

<template>
  <div class="bs-bg-color-white p10">
    <v-tree
      ref="tree"
      :container-height="height"
      :data="data"
      :props="props"
      display="CODE_NAME"
      data-type="TREE"
      multiple
      expand
      @node-collapse="handleNodeCollapse"
      @node-expand="handleNodeExpand"
      @node-click="handleNodeClick"
    >
    </v-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      height: 500,
      data: [
        {
          label: "一级 1",
          code: "code1",
          children: [
            {
              label: "二级 1-1",
              code: "code1-1",
              pcode: "code1",
              children: [
                {
                  label: "三级 1-1-1",
                  code: "code1-1-1",
                  pcode: "code1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          code: "code2",
          children: [
            {
              label: "二级 2-1",
              code: "code2-1",
              pcode: "code2",
              children: [
                {
                  pcode: "code2-1",
                  code: "code2-1-1",
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              code: "code2-2",
              pcode: "code2",
              children: [
                {
                  pcode: "code2-2",
                  code: "code2-2-1",
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          code: "code3",
          children: [
            {
              label: "二级 3-1",
              code: "code3-1",
              pcode: "code3",
              children: [
                {
                  pcode: "code3-1",
                  code: "code3-1-1",
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              code: "code3-2",
              pcode: "code3",
              children: [
                {
                  label: "三级 3-2-1",
                  code: "code3-2-1",
                  pcode: "code3-2",
                },
              ],
            },
          ],
        },
      ],
      props: {
        label: "label",
        children: "children",
        id: "code",
        pid: "pcode",
        disabled: "disabled",
      },
    };
  },
  methods: {
    /**
     * 处理收起事件
     */
    handleNodeCollapse(originalData, option) {
      console.log("originalData", originalData);
      // originalData {label: '二级 1-1', code: 'code1-1', pcode: 'code1', children: Array(1)}
      console.log("option", option);
      // option {id: 'code1-1', label: '二级 1-1', pid: 'code1', hasChildren: 1, disabled: undefined, …}
    },
    /**
     * 处理展开事件
     */
    handleNodeExpand(originalData, option) {
      console.log("originalData", originalData);
      // originalData {label: '二级 1-1', code: 'code1-1', pcode: 'code1', children: Array(1)}
      console.log("option", option);
      // option {id: 'code1-1', label: '二级 1-1', pid: 'code1', hasChildren: 1, disabled: undefined, …}
    },
    /**
     * 处理点击事件
     */
    handleNodeClick(originalData, option) {
      console.log("originalData", originalData);
      // originalData {label: '二级 1-1', code: 'code1-1', pcode: 'code1', children: Array(1)}
      console.log("option", option);
      // option {id: 'code1-1', label: '二级 1-1', pid: 'code1', hasChildren: 1, disabled: undefined, …}
    },
  },
  mounted() {},
  computed: {},
};
</script>

属性：

参数	说明	类型	可选值	默认值
data	数据	Array	-	[]
dataType	数据类型	String	'ARRAY','TREE'	' '
expand	是否默认展开	Boolean	-	false
defaultExpandedKeys	默认展开哪些节点	Boolean	-	false
multiple	复选状态	Boolean	-	false
strictly	在复选模式下，是否严格的遵循父子不互相关联	Boolean	-	false
display	节点显示类型	String	'CODE'，'NAME'，'CODE_NAME'	'NAME'
filterConsists	过滤集中包含的值	String	'SELF'，'CHILDREN'	'SELF'
props	展示数据结构	Object	-	{ id: 'code', label: 'name', pid: 'pcode', children: 'children', disabled: 'disabled', }
sortKey	排序字段对应的键名，如果没有传，则根据组件默认排序	String	-	''
containerHeight	树组件高度	Number	-	700
simpleOption	是否为简单的选项数据	Boolean	-	true
filterFunc	自定义过滤方法（需要同步返回true或者false，使用该方法时，建议将simpleOption属性设置为false）	Function	-	false
isLeaf	是否只有末级节点可选择	Boolean	-	false

事件：

事件名	说明	参数	参数说明
complete	加载完成事件	-	-
node-collapse	节点收起事件	originalData，option	节点对应的原始数据，节点本身
node-expand	节点展开事件	originalData，option	节点对应的原始数据，节点本身
node-click	节点点击事件	originalData，option	节点对应的原始数据，节点本身
check	复选事件	checkedKeys，checkedOriginalData	选中的原始数据的key值，选中的原始数据

方法：

方法名	说明	参数	参数说明
expandByCode	通过编码展开  （展开方式：展开此编码节点的所有父节点和节点本身）	code	需要展开的节点编码
setActiveNode	设置当前激活的节点	code	需要激活的节点code
updateNodeValue	更新节点数据	nodeId，value = {}	节点id，需要更新的值
setCheckedKeys	设置当前选中节点	value	节点props.id的值
getCheckedNodes	获取当前选中节点的节点信息	-	-
getCheckedKeys	获取当前选中节点对应的key值	-	-

插槽：

插槽名称	说明	参数
default	自定义树节点的内容	node