vue元素UI树，方法中获取节点

Question

如何从自定义方法（我的示例中的 applySelected）获取节点数据？我尝试使用 getNode（来自 element ui guide），但并不真正理解它是如何工作的。我想从当前节点获取 'markup'。

我使用 applySelected 方法添加了自定义按钮，参数为 node.id。

元素 ui 树 - http://element.eleme.io/#/en-US/component/tree 方法 getNode - 通过数据或键获取节点。可能，必须有更简单的方法来做到这一点。

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

element.io "click" 事件处理程序已经 returns 单击对象，无需为树发出事件指定单独的函数。所以你可以直接使用一个功能：

编辑：我刚刚看到您使用的是带有按钮的自定义模板，在这种情况下：

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>

vue元素UI树，方法中获取节点

Vue element UI tree, get node in method

element

vue.js

vuejs2