peng-tree 树形选择器

peng-tree (tki-tree) 是一个树形选择组件，支持单选/多选、父子节点联动。

基础用法

<template>
  <peng-tree 
    ref="tkitree" 
    :range="treeData" 
    idKey="id" 
    nameKey="name" 
    multiple 
    @confirm="onConfirm"
  >
  </peng-tree>
  <button @tap="showTree">打开选择器</button>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, name: '节点1', children: [{ id: 11, name: '子节点11' }] }
      ]
    }
  },
  methods: {
    showTree() {
      this.$refs.tkitree._show();
    },
    onConfirm(list) {
      console.log('已选节点:', list);
    }
  }
}
</script>

Props

参数	说明	类型	默认值
range	树形数据源	Array	[]
idKey	ID 字段名	String	'id'
nameKey	名称字段名	String	'name'
multiple	是否开启多选	Boolean	false
selectParent	父节点是否可被选择	Boolean	false
title	标题	String	''
confirmColor	确定按钮颜色	String	'#07bb07'
cancelColor	取消按钮颜色	String	'#757575'

Methods

方法名	说明	参数
_show	显示选择器	-
_hide	隐藏选择器	-

Events

事件名	说明	回调参数
confirm	点击确定时触发	(selectedList: Array)
cancel	点击取消时触发	-