当我单击它们然后将该数据传递到我的变量时如何获取特定树节点的 id

Posted 2023-02-19

【中文标题】当我单击它们然后将该数据传递到我的变量时如何获取特定树节点的 id

【英文标题】：How to get id of a specific tree node when I click on them and then pass that data into my variable

【发布时间】：2019-02-19 00:01:55

【问题描述】：

我是 Quasar 和 Vue 的新手。有人可以向我解释如何解决我的任务吗？

简单介绍一下任务：

(1) 我有一个 q-tree 元素，它代表屏幕左侧的文件夹结构 [ref.1]

(2) 这是一个文件夹结构 [ref.2]

(3) 当用户点击此文件夹结构中的任何元素时，他将在右侧看到一个新组件，其中所有被点击的子元素都在网格布局中。

这就是我现在拥有的。

[ref.1] treeComponent.vue

<template>
  <q-tree
    :nodes="documents"
    @click="getId"
    node-key="id" >
  </q-tree>
</template>

<script>
var documents = require('./documents')
module.exports = 
  data: function () 
    return 
      selectedDoc: x,
      documents: documents
    
  ,
  methods: 
    getId: function () 
      const x = this.getNodeByKey('id')
      consol.log(x)
    
  

</script>

[ref.2] 文档.js

module.exports = [
  
    id: '1',
    label: 'My Documents',
    icon: 'folder',
    children: [
      
        id: '01',
        label: 'Dir 1',
        children: [
           id: '0001', label: 'Doc 1',
           id: '0002', label: 'Doc 2'
        ]
      ,
      
        id: '02',
        label: 'Dir 2',
        children: [
           id: '0003', label: 'Doc 3',
           id: '0004', label: 'Doc 4'
        ]
      ,
      
        id: '103',
        label: 'Dir 3',
        children: [
           id: '0005', label: 'Doc 5',
           id: '0006', label: 'Doc 6',
           id: '0007', label: 'Doc 7'
        ]
      
    ]

]

【问题讨论】：

你能通过这个语句const x = this.getNodeByKey('id')取回节点吗？

不，它不工作。

将此selected.sync="selectedDoc" 添加到您的模板并在您的数据对象中添加selectedDoc:null

不，仍然无济于事。

【参考方案1】：

你需要用key替换id。之后为每个节点添加这个处理程序

handler: (node) => this.onclick(node)

然后在methods中添加这个方法

onclick(node) 
  alert(node.key)
,

这将显示特定节点的ID

【参考方案2】：

因此，主要问题与对 Quasar 框架不够熟悉有关。 这是我对这个问题的回答：

<template>
  <button v-on:click = "showNodeSelected">showClickedNode</button>
  <q-tree
    :nodes = "documents"
    :selected.sync = "selected"
    node-key="id"
  />
</template>

<script>
var documents = require('./documents')
module.exports = 
  data: function () 
    return 
      selected: null,
      documents: documents
    
  ,
  methods: 
    showNodeSelected: function () 
      console.log(this.selected)
    
  

</script>