Element-ui tree组件自定义节点使用方法代码详解


Posted in Javascript onSeptember 17, 2018

工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~

<template>
 <div class="sortDiv">
  <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-on-click-node="false" :render-content="renderContent" :allow-drop="allowDrop">
  </el-tree>
  <el-button @click="getData">获取数据</el-button>
 </div>
</template>
<script>
export default {
 name: 'Sort',
 data() {
  return {
   sortData: [
    {
     id: 1,
     label: '一级 1',
     checkItem: true,
     children: [
      {
       id: 4,
       label: '二级 1-1',
       checkItem: false
      },
      {
       id: 9,
       label: '二级 1-2',
       checkItem: false
      },
      {
       id: 10,
       label: '二级 1-3',
       checkItem: false
      }
     ]
    },
    {
     id: 2,
     label: '一级 2',
     checkItem: true,
     children: [
      {
       id: 5,
       label: '二级 2-1',
       checkItem: true
      },
      {
       id: 6,
       label: '二级 2-2',
       checkItem: true
      }
     ]
    },
    {
     id: 3,
     label: '一级 3',
     checkItem: true,
     children: [
      {
       id: 7,
       label: '二级 3-1',
       checkItem: true
      },
      {
       id: 8,
       label: '二级 3-2',
       checkItem: false
      }
     ]
    }
   ]
  };
 },
 methods: {
  // 是否允许拖拽
  allowDrop (draggingNode, dropNode, type) {
   if (draggingNode.parent === dropNode.parent) {
    return type !== 'inner'
   }
   else return false
  },
  //获取数据
  getData () {
   let result = this.$refs['sortTree'].data;
   let sortRulesMaps = [];
   result.forEach((element, index) => {
    let item = null;
    if (element.checkItem) {
     if (element.children && element.children.length > 0) {
      item = {
       orderIndex: index,
       sortField: element.label,
       rule: ['OTHERS']
      };
      element.children.forEach(i => {
       if (i.checkItem) {
        item.rule.push(i.label);
       }
      });
      item.rule = item.rule.join('_');
     }
    }
    item && sortRulesMaps.push(item);
   });
  },
  //同级置顶功能
  toTop(node, data) {
    let c = Object.assign({}, data);
    if (node.parent.level === 0) {
     this.sortData.unshift(c)
    } else {
     node.parent.data.children.unshift(c);
    }
    this.$refs['sortTree'].remove(data.id);
  },
  changeNode(r, node, data) {
   data.checkItem = r;
  },
  //自定义内容
  renderContent(h, { node, data }) {
   return (
    <span class="custom-tree-node">
     <span>{data.label}</span>
     <span>
      <el-checkbox
       v-model={data.checkItem}
       checked={data.checkItem}
       on-change={r => this.changeNode(r, node, data)}
      />
      <el-button
       size="mini"
       type="text"
       on-click={() => this.toTop(node, data)}
       style="color:#707375;margin-left:10px"
      >
       <i class="fa fa-arrow-up">置顶</i>
      </el-button>
     </span>
    </span>
   );
  }
 }
};
</script>
<style lang="scss">
.sortDiv {
 .el-icon-caret-right:before {
  content: '\E604';
 }
}
.custom-tree-node {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 14px;
 padding-right: 8px;
}
</style>

补充:下面看下使用element的自定义tree组件的实例代码

在使用elemnet-ui时,需要自定义tree的一些元素,采用 :render-content属性来进行渲染这些元素,但是官网给的例子有一点小坑,

renderContent:function(createElement, { node, data, store }) {
        var self = this;
        return createElement('span', [
          createElement('span', node.label),
          createElement('span', {attrs:{
            style:"float: right; margin-right: 200px"
          }},[
            createElement('el-button',{attrs:{
              size:"mini"
            },on:{
              click:function() {
                console.info("点击了节点" + data.id + "的添加按钮");
                store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);
              }
            }},"添加"),
            createElement('el-button',{attrs:{
              size:"mini"
            },on:{
              click:function() {
                console.info("点击了节点" + data.id + "的删除按钮");
                store.remove(data);
              }
            }},"删除"),
          ]),
        ]);
      }

总结

以上所述是小编给大家介绍的Element-ui tree组件自定义节点使用方法代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
jqgrid 简单学习笔记
May 03 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
Json实现传值到后台代码实例
Jun 30 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 #Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 #Javascript
分享5个好用的javascript文件上传插件
Sep 16 #Javascript
vuex直接赋值的三种方法总结
Sep 16 #Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 #Javascript
vue2过滤器模糊查询方法
Sep 16 #Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 #Javascript
You might like
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
简述vue状态管理模式之vuex
2018/08/29 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
整理Python最基本的操作字典的方法
2015/04/24 Python
python定时执行指定函数的方法
2015/05/27 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
中职应届生会计求职信
2013/10/23 职场文书
职工运动会邀请函
2014/02/02 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
国培计划培训感言
2014/03/11 职场文书
国旗下演讲稿
2014/05/08 职场文书
安全生产月宣传标语
2014/10/06 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电