classification-tree v0.0.4

classification-tree

English | 简体中文

introduce

This component is based on vue3. It is used to display the tree structure. Each tree node can be customized through slots. The display effect is as follows:
default：

custom：

demo

install

$ npm install classification-tree -S

use

<script>
import 'classification-tree/lib/style.css'
import ClassifyTree from 'classification-tree'
import { defineComponent } from 'vue'
export default defineComponent({
	components: {
		ClassifyTree,
	},
  data() {
    return {
      nodeList: [
        {
          label: 'root',
          key: 0,
          slotScope: 'rootNode',
          connectLineOption: {
            showArrow: true,
            lineColor: 'blue',
            lineHeight: '40px',
          },
          children: [
            {
              label: 'node1',
              key: 1,
              connectLineOption: {
                showArrow: true,
              },
              children: [
                {
                  label: 'node11',
                  key: 11,
                  connectLineOption: {
                    lineColor: 'red',
                  },
                },
                {
                  label: 'node12',
                  key: 12,
                  connectLineOption: {
                    lineColor: '#158468',
                  },
                },
                {
                  label: 'node13',
                  key: 13,
                  slotScope: 'newTag',
                  connectLineOption: {
                    lineColor: 'rgba(255, 122, 75, 0.5)',
                  },
                },
              ],
            },
          ],
        },
      ],
      mode: 'vertical'
    }
  }
})
</script>
<template>
	<ClassifyTree :node-list="nodeList" :mode="mode" >
    <template #default="{ node, parent }">
			<div class="classify-item">
        default slot{{ node.label }}
      </div>
    </template>
    <template #rootNode="{ node, parent }">
			<div class="classify-item">
        root node {{ node.label }}
      </div>
    </template>
    <template #newTag="{ node, parent }">
			<div class="classify-item">
        new tag{{ node.label }}
      </div>
    </template>
  </ClassifyTree>
</template>

classification-tree props

ClassificationNode Object

ConnectLineOption Object