JSFiddle - React, Tailwind, and code Playground

by abernov

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-tree ref="tree" :data="data6" node-key="id" default-expand-all="" @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop"
    draggable :allow-drop="allowDrop" :allow-drag="allowDrag">
  </el-tree>
<el-button
            type="text"
            size="mini"
            @click="displayLabel">
            Show node label
          </el-button>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

Babel + JSX

Vue.config.debug = true
Vue.config.devtools = true

var Main = {
    data() {
      return {
        data6: [{
          id: 1,
          label: 'Level one 1',
          children: [{
            id: 11,
            label: 'Level two 1-1',
            children: [{
              id: 111,
              label: 'Level three 1-1-1'
            }]
          }]
        }, {
          label: 'Level one 2',
          id: 2,
          children: [{
            id: 21,
            label: 'Level two 2-1',
            children: [{
              id: 211,
              label: 'Level three 2-1-1'
            }]
          }, {
            id: 22,
            label: 'Level two 2-2',
            children: [{
              id: 221,
              label: 'Level three 2-2-1'
            }]
          }]
        }, {
          label: 'Level one 3',
          id: 3,
          children: [{
            id: 31,
            label: 'Level two 3-1',
            children: [{
              id: 311,
              label: 'Level three 3-1-1'
            }]
          }, {
            id: 32,
            label: 'Level two 3-2',
            children: [{
              id: 321,
              label: 'Level three 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      displayLabel() {     
        let node = this.$refs.tree.getNode(21)
        if (node)
           alert(node.data.label)
        else
           alert('The BUG')
      },
      handleDragStart(node, ev) {
        console.log('drag start', node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log('tree drag enter: ', dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log('tree drag leave: ', dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log('tree drag over: ', dropNode.label);
      },
     ...