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>