Skip to content

获取选中节点的路径 #157

Open
@achuan9

Description

@achuan9

认为缺少一个这样点API:
当选择一个子节点,应该返回该子节点选择路径数组,也就是所有父节点。
举例:
当树结构是 省市区,那么直接选择某个区,应该有一个获取包括当前区及所在省市的信息API。
目前的实现方法:

<template>
  <v-tree
    ref="tree"
    :data="treeData"
    :tpl="tpl"
    :draggable="false"
    :radio="true"
    :maxLevel="4"
    :allowGetParentNode="true"
    @node-select="nodeSelect"
  />
</template>
<script>
import 'vue-tree-halower/dist/halower-tree.min.css'
import { VTree } from 'vue-tree-halower'
export default {
  components: { VTree },
  data() {
    return {
      treeData: [
        {
          title: '南山区',
          children: [
            {
              title: '粤海街道',
              children: [
                { title: '科苑北路1' },
                { title: '科苑北路2' },
                { title: '科苑北路3' }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    tpl(node, ctx, parent, index, props) {
      let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
      if (node.searched) titleClass += ' node-searched'
      node.parent = () => parent
      //节点标题
      const titleNode = (
        <span
          class={titleClass}
          domPropsInnerHTML={node.title}
          onClick={() => this.$refs.tree.nodeSelected(node, props)}
        />
      )
      return <span>{titleNode}</span>
    },
    nodeSelect(node) {
      const list = [node]
      while (node.parent() !== null) {
        list.push(node.parent())
        node = node.parent()
      }
      console.log(list.map(item => item.title))
    }
  }
}
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions