Vue.js的可定制的可拖动树组件

SL-VUE树 (sl-vue-tree)

Customizable draggable tree component for Vue.js

Vue.js的可定制的可拖动树组件

安装 (install)

npm i sl-vue-tree

npm i sl-vue-tree

快速开始 (Quick start)

<div id="app">
  <sl-vue-tree v-model="nodes"/>
</div>

<link rel="stylesheet" href="dist/sl-vue-tree-dark.css">
<script src="dist/sl-vue-tree.js"></script>

<script>

    var nodes = [
    {title: 'Item1', isLeaf: true},
    {title: 'Item2', isLeaf: true, data: { visible: false }},
    {title: 'Folder1'},
    {
      title: 'Folder2', isExpanded: true, children: [
        {title: 'Item3', isLeaf: true},
        {title: 'Item4', isLeaf: true}
      ]
    }
  ];

  new Vue({
    el: '#app',
    components: { SlVueTree },
    data: function () {
     return {
       nodes: nodes
     }
    }
  });
  
</script>

The value property is array of ISlTreeNodeModel nodes:

value属性是ISlTreeNodeModel节点的数组：

interface ISlTreeNodeModel<TDataType> {
    title: string;
    isLeaf?: boolean;
    children?: ISlTreeNodeModel<TDataType>[];
    isExpanded?: boolean;
    isSelected?: boolean;
    data?: TDataType; // any serializable user data
}

For convenience the component's events returns ISlTreeNode objects those actually are ISlTreeNodeModel with some computed props:

为了方便起见，组件的事件返回ISlTreeNode对象，这些对象实际上是带有一些计算道具的ISlTreeNodeModel ：

interface ISlTreeNode<TDataType> extends ISlTreeNodeModel<TDataType> {
    isFirstChild: boolean;
    isLastChild: boolean;
    isVisible: boolean;	// node is visible if the all of it's parents are expanded
    level: number; // nesting level
    ind: number; // index in the array of siblings 
    path: number[]; // path to node as array of indexes, for exaple [2, 0, 1] in example above is path to `Item4` 
    pathStr: string; // serialized path to node
    children: ISlTreeNode<TDataType>[];
}

You can get the list of ISlTreeNode from the computed slVueTree.nodes property

您可以从计算的slVueTree.nodes属性中获取ISlTreeNode的列表。

道具 (Props)

计算道具 (Computed props)

interface ICursorPosition<TDataType> {
  node: ISlTreeNode<TDataType>;
  placement: 'before' | 'inside' | 'after';
}

大事记 (Events)

方法 (Methods)

插槽 (Slots)

例： (Example:)

handle keydow and keyup events via getNextNode and getPrevNode methods

通过getNextNode和getPrevNode方法处理keydow和keyup事件

demo

演示

例： (Example:)

add a folder or item icon via title slot

通过title栏添加文件夹或项目图标

<sl-vue-tree v-model="nodes">
    <template slot="title" slot-scope="{ node }">

      <span class="item-icon">
        <i class="fa fa-file" v-if="node.isLeaf"></i>
        <i class="fa fa-folder" v-if="!node.isLeaf"></i>
      </span>
    
      {{ node.title }}
      
    </template>
</sl-vue-tree>

例： (Example:)

select all nodes

选择所有节点

slVueTree.traverse((node, nodeModel, path) => {
    Vue.set(nodeModel, 'isSelected', true);
})

翻译自: https://vuejsexamples.com/customizable-draggable-tree-component-for-vue-js/