精华内容
下载资源
问答
  • 前端开源库-tree-node-clitree node cli以树形格式列出目录的内容,类似于linux tree命令。
  • vxe-table 动态列 tree-node功能

    千次阅读 2020-06-28 20:34:11
    vxe-table 动态列 和tree-node功能 官网参考资料 https://xuliangzhan_admin.gitee.io/vxe-table/#/table/grid/tree 组件 <vxe-table :data="tableData" :columns="tableColumn" // 动态列 :tree-config="{...

    vxe-table 动态列 和tree-node功能

    官网参考资料
    https://xuliangzhan_admin.gitee.io/vxe-table/#/table/grid/tree

    在这里插入图片描述

    实现过程-代码

    组件

    	<vxe-table
            :data="tableData"
            :columns="tableColumn" // 动态列
            :tree-config="{children: 'children'}">
            	
            		<!-- 插槽用法 -->
                  <template v-slot:index_id="{ row, column }">
    		        <span>{{row.Id}}--插槽:可随便写一些你想写的内容</span>
    		      </template>
          </vxe-table>
    

    动态列

    data(){
    	retrun {
    		tableColumn: [
    	        { 	field: "Id", 
    	        	title: "Id", 
    	        	width: 80,
    	        	treeNode: true, // 树节点声明--重点
    	          	slots: { default: "index_id"} // 插槽声明
    	        },
    	        {
    	          field: "sex",
    	          title: "sex",
    	          width: 120,
    	          editRender: { name: "input" }
    	        },
    	        {
    	          field: "date",
    	          title: "date",
    	          width: 120,
    	          editRender: { name: "input" }
    	        }
          ],
          tableData: [{
            Id: '1',
            sex: '男',
            date: '2019-08',
            children: [
              {
                Id: '1-2',
            	sex: '女',
            	date: '2019-08',
                children: [
                  {
                    Id: '1-3',
                    sex: '男',
                    date: '2019-08',
                  },
                  {
                    Id: '1-4',
                    sex: '男',
                    date: '2019-08',
                  }
                ]
             },
             {
               Id: '2',
               sex: '女',
               date: '2019-08'
              }
    	}
    }
    

    如有不懂,可留评论哈!

    展开全文
  • var Node = require("tree-node"); 创造 var node = new Node(); #createChild() var rootNode = new Node(); var childNode = root.createChild(); #getNode(childId) return a node. if no return null....
  • 使用tree-node-cli生成树状目录

    千次阅读 2019-09-18 15:43:46
    在写博客的时候经常会需要展示项目的目录结构,我电脑是windows的,tree命令不是很好使。...分别是tree-cli和tree-node-cli,这两个是一个作者。其中tree-node-cli是比较适合Linux用户的,大小写区分,而且还有...

    在写博客的时候经常会需要展示项目的目录结构,我电脑是windows的,tree命令不是很好使。能用Node就用Node! 所以就找了几个跨平台的。分别是tree-clitree-node-cli,这两个是一个作者。其中tree-node-cli是比较适合Linux用户的,大小写区分,而且还有API,但是目前不能直接生成文件。除了这种类型的,还有生成md的、能生成网页的等等,大家自己搜搜就好了。

    安装tree-node-cli

    npm install -g tree-node-cli

    使用

    执行如下命令即可在终端中生成,复制保存下来即可。

    treee -L 3 -I "node_modules|.idea|objects|.git" -a --dirs-first

    结果:

    ├── .electron-vue
    │   ├── build.js
    │   ├── dev-client.js
    │   ├── dev-runner.js
    │   ├── webpack.main.config.js
    │   ├── webpack.renderer.config.js
    │   └── webpack.web.config.js
    ├── assets
    │   ├── commitMessageStandard.md
    │   ├── home.jpg
    │   ├── tree.txt
    │   └── treeNodeCli.md
    ├── build
    │   └── icons
    │       ├── 256x256.png
    │       ├── icon.icns
    │       └── icon.ico
    ├── dist
    │   ├── electron
    │   │   └── main.js
    │   └── web
    ├── src
    │   ├── main
    │   │   ├── index.dev.js
    │   │   └── index.js
    │   ├── renderer
    │   │   ├── assets
    │   │   ├── components
    │   │   ├── router
    │   │   ├── store
    │   │   ├── views
    │   │   ├── App.vue
    │   │   └── main.js
    │   └── index.ejs
    ├── static
    ├── .babelrc
    ├── .travis.yml
    ├── appveyor.yml
    ├── package-lock.json
    ├── package.json
    └── README.md
    

    解释

    • windows用户需要用treee代替tree,避免和系统的tree命令冲突。 treee

    • 指定路径的级别为3级。

      -L 3

    • 忽略文件夹(正则表达式匹配的,.git会匹配到.gitignore,所以.gitignore文件没有显示出来)。

      -I "node_modules|.idea|objects|.git"

    • 显示所有文件(默认前缀有"."的不会显示,例如".electron-vue")。

      -a

    • 目录在前,文件在后(默认是字母排序,和idea显示的顺序不一致)。

      --dirs-first

    完整选项

    -V, --version             输出版本号
    -a, --all-files           打印所有文件,包括隐藏文件
    --dirs-first              目录在前,文件在后
    -d, --dirs-only           仅列出目录
    -I, --exclude [patterns]  排除与模式匹配的文件。用 | 隔开,用双引号包裹。 例如 “node_modules|.git”
    -L, --max-depth <n>       目录树的最大显示深度
    -r, --reverse             按反向字母顺序对输出进行排序
    -F, --trailing-slash      为目录添加'/'
    -h, --help                输出用法信息
    

    卸载

    npm uninstall -g tree-node-cli

    转载于:https://my.oschina.net/u/3667677/blog/3040758

    展开全文
  • npm install --save react-sortable-tree-theme-full-node-drag import React , { Component } from 'react' ; import SortableTree from 'react-sortable-tree' ; import FileExplorerTheme from 'react-sortable-...
  • node-tree node实现linux下Tree -L命令,展示目录。 how to start npm install how to use 1 展示所有目录 tree node ../node-tree/index.js 2 展示指定目录级数 tree -L 1 node node-tree/index.js -L 1 3 【拓展】...
  • element el-tree current-node-key无效 setCurrentKey()无效 可以结合 current-node-key属性和this.refs[′treeRef′].setCurrentKey()方法及this.refs['treeRef'].setCurrentKey()方法及this.refs[′treeRef′]....

    element el-tree current-node-key无效 setCurrentKey()无效

    可以结合 current-node-key属性和this.$refs['treeRef'].setCurrentKey()方法及this.$nexTick()同时使用

    代码如下

    <el-tree
    	ref="treeRef"
    	node-key="id"
    	:data="list"
    	:current-node-key="currentKey"
    ><el-tree>
    

    js:

    created(){
    	this.list=[数据]
    	this.$nextTick(()=>{
    		this.currentKey=this.list[0].id
    		this.$refs['treeRef'].setCurrentKey(this.currentKey)
    	})
    }
    
    展开全文
  • 业务场景需求分析踩坑实录关键代码补充说明Element 官网链接 业务场景 我司的在线网盘项目,弹窗里要...在Element组件里,Tree树形控件算是相对复杂的一个,但是文档却很简略,大部分API都没有使用示例。讲一下我遇.

    业务场景

    我司的在线网盘项目,弹窗里要实现一个目录树,用于选择文件要移动的目标路径。
    在这里插入图片描述

    需求分析

    1. 点击节点时,选中该节点
      1.1 如果该节点下有子节点,同时触发展开(或收起)
    2. 点击左边树节点图标,展开节点时,选中该节点
    3. 点击左边树节点图标,收起节点时,选中该节点

    总之,只要点击在某一个节点所在行,都要选中该节点

    踩坑实录

    在Element组件里,Tree树形控件算是相对复杂的一个,但是文档却很简略,大部分API都没有使用示例。讲一下我遇到的问题。

    • 实现需求1,因为 UI 同学没有给复选框,所以要配置 check-on-click-node 参数实现点击选中;同时使用 node-click 事件来监听。但是自测发现,当点击在左边的节点展开/收起图标上,不会触发 click 事件。
    • 要想实现需求2,需要另外配置 node-expand 事件监听
    • 同样,实现需求3,需要另外配置 node-collapse 事件监听

    这样,选中节点的三种触发条件我们都考虑到了。下面赋值 data: currentNodeKey,保存当前选中节点的ID,并体现出选中状态的高亮效果

    • current-node-key(当前选中的节点)
      这个参数有个问题:如果在 data 里定义初始值,可以实现该id对应节点的默认选中高亮效果。但如果用 this.currentNodeKey = xx 再修改这个值,没有任何变化。
    • setCurrentKey(通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性)
      继续往下看文档,找到这个 Tree 实例方法。先获取 Tree 实例再调用该方法,虽然实现了修改选中状态和高亮效果,但并没有响应式地修改 currentNodeKey 的值。

    也就是说,这两个配置要同时存在才能实现完整的选中效果。一个改了 currentNodeKey 值,选中的样式却没变;一个改了选中状态的样式效果,选中值却没变。

    反人类啊有没有???

    好吧,反正element也不维护了,凑合用吧。测试出这些配置的实际效果,就可以愉快地填坑了,其实也很简单,监听 currentNodeKey 值的变化,再调用 setCurrentKey 方法就可以了。

    关键代码

    <template>
    	<div>
    		...
    		<el-tree
    	        ref="my-tree"
    	        :data="treeData"
    	        node-key="id"
    	        highlight-current
    	        check-on-click-node
    	        :current-node-key="currentNodeKey"
    	        @node-click="handleNodeClick"
    	        @node-expand="handleNodeExpand"
    	        @node-collapse="handleNodeCollapse"
    	      ></el-tree>
    		...
    	</div>
    </template>
    
    <script>
    export default {
      watch: {
        currentNodeKey(id) {
        // Tree 内部使用了 Node 类型的对象来包装用户传入的数据,用来保存目前节点的状态。可以用 $refs 获取 Tree 实例
          if (id.toString()) {
            this.$refs["my-tree"].setCurrentKey(id);
          } else {
            this.$refs["my-tree"].setCurrentKey(null);
          }
        }
      },
      data() {
        return {
          treeData: [],
          currentNodeKey: "" // 当前选中的节点(移动/复制到的目标文件夹id)
        };
      },
      methods: {
        // 节点被点击时的回调
        // 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
        handleMoveCopyNodeClick(data) {
          this.currentNodeKey = data.id;
        },
        // 节点被展开时触发的事件
        // 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
        handleMoveCopyNodeExpand(data) {
          this.currentNodeKey = data.id;
        },
        // 节点被关闭时触发的事件
        // 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
        handleMoveCopyNodeCollapse(data) {
          this.currentNodeKey = data.id;
        },
        ...
      }
    };
    </script>
    

    补充说明

    实现并不完美。如果点击的节点有子节点,会同时触发 node-clicknode-expand / node-collapse 事件,造成多余调用。
    如果事件处理函数有赋值之外的其他副作用,会造成意想不到的bug,有这个需求的注意添加条件判断一下。

    Element 官网链接

    Element Tree组件官方文档

    展开全文
  • vue-org-tree 组织结构图组件应用及源码分析

    千次阅读 热门讨论 2019-09-05 09:58:57
    var label=classList.find(item=> item=="org-tree-node-label-inner") if(label){ this.$store.commit("setCurrentNode",data) }else{ //alert(111) } },             ...
  • npm install --save dependency-tree 适用于JS(AMD,CommonJS,ES6模块),Typescript和CSS预处理程序(CSS(PostCSS),Sass,Stylus和Less); 基本上, 支持的任何模块类型。 对于CommonJS模块,默认情况下,...
  • 在使用element-ui的Tree组件添加一些按钮的时候,比如这样: 这个时候如果设置了expand-on-click-node属性为true的话,点击按钮会同步触发节点的展开收缩事件。 如果使用的是scoped slot的话可以直接使用.stop修饰...
  • antdv(vue)组件中tree-select使用

    千次阅读 2021-03-18 14:33:36
    官网教程:组件tree-select 实现效果: 1.基本用法:直接使用 在vue层写数据 注意:注册组件要包含treeSelect和其中的节点ATreeSelectNode 不注册会报错,如下: <template> <a-tree-select v-model:...
  • el-tree node-click="(data, node, item) => NodeClick(data, node, item, param)"></el-tree> NodeClick(data, node, item, param) { console.log(data) // data,node,item为默认参数 console.log...
  • 安装 npm install --save angular-tree-component
  • el-tree的使用与样式修改大全

    千次阅读 2020-05-29 17:29:20
    el-tree的使用与样式修改大全 一、样式篇 1、修改节点选中后的样式 ....el-tree-node:focus>.el-tree-node__content{ background-color: #5daaf0; //背景色 color:red; //字体颜色 } 二、使用篇 ...
  • 两棵el-tree的节点跨树拖拽实现

    千次阅读 热门讨论 2020-09-17 09:40:30
    在使用element-ui框架时,我们经常会用到el-tree组件。该组件支持在树上任意拖拽节点,但默认不支持将节点拖拽到树的外部,如一个外部div内,或另一棵el-tree上。 关于如何将树上的节点拖拽到一个外部容器内(如一个...
  • el-tree-select的使用

    千次阅读 2020-04-07 19:58:16
    如果本地启动API需要全局安装:npm install -g @vuese/cli 需在main.js注册组件: import ElTreeSelect from 'el-tree-select'; vue.use(ElTreeSelect); 内部直接使用 : <el-tree-select v-model="id"/> ...
  • a-tree-select显示全部节点

    千次阅读 2020-01-17 14:43:00
    treeNodeLabelProp = “label” 把节点遍历, :dropdownStyle="{maxHeight:‘400px’,overflow:‘auto’,zIndex:10000}" placeholder=“请选择” :treeDate=‘treeData’ :value=‘treeData.code’ ...
  • 一篇很详细的思维导图(组织机构树)工具(vue-org-tree)的使用总结 1.业务需求: 最近应公司业务需求,需要在vue项目中使用思维导图(组织机构树)功能,用来展示系统产品的质量追溯。然后呢,我就开始收集资料了,...
  • 首先来看下效果图: 当然颜色可以自定义,下面放下代码: <style> .el-tree-node:focus >... .el-tree-node__content:hover { background-color: #66b1ff87; } .el-tree--highlight-current .el-tree-.
  • element el-tree 树图颜色配置

    千次阅读 2020-06-28 09:32:34
    /* 设置树形最外层的背景颜色和字体颜色 */ .el-tree { color: #fff; background: transparent; } ....el-tree-node__content:hover .el-tree-node__expand-icon { color: #000; } /* .el-tre.
  • .mini-tree-nodetitle{ height:30px; } .mini-grid-cell{ font-size: font-family: }
  • angular-ui-tree使用简介

    万次阅读 热门讨论 2016-07-21 14:41:12
    今天为大家介绍下angular-ui-tree的使用方法,它是一个不依赖于jquery 的angualrJS UI,友好的外观,方便的操作,是它最大的优势。 angular-ui-tree有如下特点: 1.使用本地AngularJS范围数据绑定 2.整个树都可以进行...
  • 打造基于jQuery的高性能TreeView

    千次阅读 2018-07-17 15:32:04
    .bbit-tree-node-collapsed .bbit-tree-node-icon, .bbit-tree-node-expanded .bbit-tree-node-icon, .bbit-tree-node-leaf .bbit-tree-node-icon{ border: 0 none; height: 18px; margin: 0; padding: 0; ...
  • 基于 vue-tree-chart,生成项目效果预览,包含鼠标右击事件; vue-tree-chart:https://github.com/tower1229/Vue-Tree-Chart 大家可以直接安装使用(具体事例可以查看官网) 但是个人建议最好是下载整个项目,封装成...
  • 代码: <template> <div> <el-tree :props="props" :load="loadNode" :data="signalList" lazy> </el-tree> </div> </template> <script&...
  • vue实现tree-table

    千次阅读 2019-05-31 14:12:39
    elment有实现好的tree-table组件可以用,但是自己想自己写写看,写的有点挫,但是功能都实现了,特此记录下,如有不对的地方,欢迎指正. 效果图如下: 可以无限级展开 思路:将后端的数据处理生成树形结构,再通过深度优先...
  • node-tree-sitter-javascript node-tree-sitter的Javascript语法
  • 原因分析: 因为.el-tree-node__content的 display默认的是flex,所以下边的div内容撑不起来,而且.el-tree-node__children的overflow属性是hedden,所以下边的内容一多就自动隐藏了; 解决方法: .el-tree{ ....
  • angular.js、react.js、vue.js 现在前端主流的三大框架中,从17年开始又以vue...el-tree&gt;&lt;/el-tree&gt;便签时,发现了原生并没有支持高亮检索词属性。而树形结构在查找东西时,对于不太熟悉的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 318,747
精华内容 127,498
关键字:

tree-node