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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
2015年高校就业工作总结
2015/05/04 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书