Vue.js的可自定义可拖动树组件– sl-vue-tree

Vue.js的可自定义可拖动树组件– sl-vue-tree
插件名称 sl-vue-tree
发布时间 2020年9月3日
插件作者 holiber

只是vue.js应用程序的另一个可自定义,可拖动的treeview组件。

安装和下载:

# NPM
$ npm install sl-vue-tree --save

使用

<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>    

value属性是ISlTreeNodeModel节点数组:

interface ISlTreeNodeModel<TDataType> {
    title: string;
    isLeaf?: boolean;
    children?: ISlTreeNodeModel<TDataType>[];
    isExpanded?: boolean;
    isSelected?: boolean;
    isDraggable?: boolean;
    isSelectable?: boolean;
    data?: TDataType; // 任何可序列化的用户数据
}

为了方便起见,组件的事件返回ISlTreeNode对象。这些实际上ISlTreeNodeModel 带有一些经过计算的道具:

interface ISlTreeNode<TDataType> extends ISlTreeNodeModel<TDataType> {
    isFirstChild: boolean;
    isLastChild: boolean;
    isVisible: boolean;	// 如果展开节点的所有父节点,则节点可见
    level: number; // 嵌套水平
    ind: number; // 同级数组中的索引
    path: number[]; // 作为索引数组的节点路径,例如上面的示例中的[2,0,1]是指向`Item4的路径`
    pathStr: string; // 节点的序列化路径
    children: ISlTreeNode<TDataType>[];
}

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