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: ,
           label: '一级 1',
           checkItem: true,
           children: [
             {
               id: ,
               label: '二级 1-1',
               checkItem: false
             },
             {
               id: ,
               label: '二级 1-2',
               checkItem: false
             },
             {
               id: ,
               label: '二级 1-3',
               checkItem: false
             }
           ]
         },
         {
           id: ,
           label: '一级 2',
           checkItem: true,
           children: [
             {
               id: ,
               label: '二级 2-1',
               checkItem: true
             },
             {
               id: ,
               label: '二级 2-2',
               checkItem: true
             }
           ]
         },
         {
           id: ,
           label: '一级 3',
           checkItem: true,
           children: [
             {
               id: ,
               label: '二级 3-1',
               checkItem: true
             },
             {
               id: ,
               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 > ) {
             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 === ) {
           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: ;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
   padding-right: 8px;
 }
 </style>