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 相关文章推荐
中文字符串截取的js函数代码
Apr 17 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
puppeteer库入门初探
Jan 09 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 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
初学CAKEPHP 基础教程
2009/11/02 PHP
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
windows环境下tensorflow安装过程详解
2018/03/30 Python
通过Pandas读取大文件的实例
2018/06/07 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python制作朋友圈九宫格图片
2019/11/03 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
酒店应聘自荐信
2013/11/09 职场文书
建筑人员岗位职责
2013/12/25 职场文书
小学课外活动总结
2014/07/09 职场文书
求职意向书
2014/07/29 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
投资合作意向书范本
2015/05/08 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
java解析XML详解
2021/07/09 Java/Android
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS