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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
Js图片点击切换轮播实现代码
Jul 27 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
一个ftp类(ini.php)
2006/10/09 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
php魔术变量用法实例详解
2014/11/13 PHP
ThinkPHP模型详解
2015/07/27 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
vue实现简单图片上传
2020/06/30 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python下载库的步骤方法
2019/10/12 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
python中线程和进程有何区别
2020/06/17 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
应届生法律顾问求职信
2013/11/19 职场文书
年度考核自我鉴定
2014/03/19 职场文书
精神病医院见习报告
2014/11/03 职场文书
2014年手术室工作总结
2014/11/26 职场文书
小王子读书笔记
2015/06/29 职场文书
活动新闻稿范文
2015/07/17 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
JavaScript文档对象模型DOM
2021/11/20 Javascript
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏