Vue дерево UI элемента, получить узел в методе - PullRequest
Новая
       9

Vue дерево UI элемента, получить узел в методе

0 голосов
/ 07 января 2019

Как получить данные узла из пользовательских методов (applySelected в моем примере)? Я пытаюсь использовать getNode (из element ui guide), но не очень понимаю, как это работает. Я хотел бы получить разметку от текущего узла.

Я добавил пользовательскую кнопку с методом applySelected с параметром node.id.

Элемент пользовательского интерфейса - 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 голосов
/ 07 января 2019

Обработчик события "click" element.io уже возвращает объект, по которому щелкнули, не нужно указывать отдельную функцию для случая, когда Дерево генерирует событие. Таким образом, вы можете сразу использовать одну функцию:

Edit: я просто вижу, что вы используете пользовательский шаблон с кнопкой, в этом случае: 

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>
...