Vue element UI tree, get node in method

Question

How to get node data from custom methods (applySelected in my sample)? I try to use getNode (from element ui guide), but not really understand, how its work. I would want to get 'markup' from current node.

I added custom button with applySelected method, with node.id parameter.

Element ui tree - http://element.eleme.io/#/en-US/component/tree Method getNode - get node by data or key. Possible, there must be more easy way to do that.

var Main = {
  data() {
    return {
      data: [
        {
          id: 1,
          label: 'Level one 1',
          markup: '111',
          children: [{
            id: 4,
            label: 'Level two 1-1',
            markup: '112',
            children: [{
              id: 9,
              label: 'Level three 1-1-1',
              markup: '131'
            }, {
              id: 10,
              label: 'Level three 1-1-2',
              markup: '141'
            }]
          }]
        }, {
          id: 2,
          label: 'Level one 2',
          markup: '161',
          children: [{
            id: 5,
            label: 'Level two 2-1',
            markup: '117'
          }, {
            id: 6,
            label: 'Level two 2-2',
            markup: '118'
          }]
        }, {
          id: 3,
          label: 'Level one 3',
          markup: '119',
          children: [{
            id: 7,
            label: 'Level two 3-1',
            markup: '211'
          }, {
            id: 8,
            label: 'Level two 3-2',
            markup: '177'
          }]
        }]
    }
  },

  methods: {
    handleNodeClick(data) {
      console.log(data.markup);
    },
    applySelected(nodeid) {
      console.log(nodeid);
      //console.log(this.$refs.markupTree.getNode(nodeid));
      console.log(this.$refs.markupTree.getNode(nodeid).markup);
      console.log(this.$refs.markupTree.getCheckedNodes());
    },
    getCheckedNodes() {
      console.log(this.$refs.markupTree.getCheckedNodes());
    }

  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css");
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
.el-tree-node__content {
    height: 55px !important;
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>

<div id="app">
  <el-button @click="getCheckedNodes">get by node</el-button>
  <div class="custom-tree-container">
    <div class="block">
      <el-tree
               :data="data"
               show-checkbox=""
               node-key="id"
               :expand-on-click-node="false"
               ref="markupTree"
               @node-click="handleNodeClick"
               >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="catname">
            <el-input
                      v-model="node.label"
                      size="small"
                      :ref="'node'+ node.id"
                      ></el-input>
          </span>

          <span class="catmarkup">
            <el-input
                      placeholder="Please input"
                      v-model="data.markup"
                      size="small"
                      v-bind:name="data.input"
                      >
              <template slot="append">%</template>
            </el-input>
          </span>
          <el-button
                     icon="el-icon-check"
                     type="primary"
                     size="small"
                     v-on:click="applySelected(node.id)"
                     ></el-button>
        </span>

      </el-tree>

    </div>
  </div>
</div>

Answer 1

The element.io "click" event handler already returns the clicked object, no need to specify a separate function for when the Tree emits an event. So you can use one function straight away:

Edit: I just see you're using a custom template with a button in it, in that case:

var Main = {
  data() {
    return {
      data: [
        {
          id: 1,
          label: 'Level one 1',
          markup: '111',
          children: [{
            id: 4,
            label: 'Level two 1-1',
            markup: '112',
            children: [{
              id: 9,
              label: 'Level three 1-1-1',
              markup: '131'
            }, {
              id: 10,
              label: 'Level three 1-1-2',
              markup: '141'
            }]
          }]
        }, {
          id: 2,
          label: 'Level one 2',
          markup: '161',
          children: [{
            id: 5,
            label: 'Level two 2-1',
            markup: '117'
          }, {
            id: 6,
            label: 'Level two 2-2',
            markup: '118'
          }]
        }, {
          id: 3,
          label: 'Level one 3',
          markup: '119',
          children: [{
            id: 7,
            label: 'Level two 3-1',
            markup: '211'
          }, {
            id: 8,
            label: 'Level two 3-2',
            markup: '177'
          }]
        }]
    }
  },

  methods: {
    nodeClickButton(nodeDataObj) {
      console.log(nodeDataObj.markup);
    },
    getCheckedNodes() {
      console.log(this.$refs.markupTree.getCheckedNodes());
    }

  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css");
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
.el-tree-node__content {
    height: 55px !important;
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>

<div id="app">
  <el-button @click="getCheckedNodes">get by node</el-button>
  <div class="custom-tree-container">
    <div class="block">
      <el-tree
               :data="data"
               show-checkbox=""
               node-key="id"
               :expand-on-click-node="false"
               ref="markupTree"
               >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="catname">
            <el-input
                      v-model="node.label"
                      size="small"
                      :ref="'node'+ node.id"
                      ></el-input>
          </span>

          <span class="catmarkup">
            <el-input
                      placeholder="Please input"
                      v-model="data.markup"
                      size="small"
                      v-bind:name="data.input"
                      >
              <template slot="append">%</template>
            </el-input>
          </span>
          <el-button
                     icon="el-icon-check"
                     type="primary"
                     size="small"
                     @click="nodeClickButton(data)"
                     ></el-button>
        </span>

      </el-tree>

    </div>
  </div>
</div>