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

工作上使用到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>