Vue元素UI树，在方法

时间：2019-01-07 14:01:59

标签： vue.js vuejs2 element

如何从自定义方法（在我的示例中为applySelect）获取节点数据？ 我尝试使用getNode（来自元素ui指南），但不是很了解它是如何工作的。我想从当前节点获取“标记”。

我添加了带有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>

1 个答案:

答案 0 :(得分：1)

element.io“单击”事件处理程序已经返回被单击的对象，无需为Tree发出事件时指定单独的函数。因此，您可以立即使用一个功能：

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

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>

相关问题
最新问题