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 相关文章推荐
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 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
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
javascript 实现map集合
2015/04/03 Javascript
javascript中Function类型详解
2015/04/28 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
JS中的多态实例详解
2017/10/15 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
浅述python中深浅拷贝原理
2018/09/18 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
python 实现图片批量压缩的示例
2020/12/18 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
户外拓展活动方案
2014/02/11 职场文书
活动主持人开场白
2015/05/28 职场文书
单身证明范本
2015/06/15 职场文书
《将心比心》教学反思
2016/02/23 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis