uniapp 小程序通过tkiTree实现树状结构选择

最新推荐文章于 2024-09-25 12:29:21 发布

还好c

最新推荐文章于 2024-09-25 12:29:21 发布

阅读量449

点赞数 13

文章标签： uni-app 小程序前端

本文链接：https://blog.csdn.net/abc123abccc/article/details/140504541

版权

1.该组件需要通过插件市场下载引入，才能使用，引入以后，记得重启微信开发者工具。

插件市场地址：树形选择器增强版，支持多选、单选、父级选择，Picker形式 - DCloud 插件市场

2.示例代码

<template>
  <view class="info-item" @click="handleShowTree">
    点击获取区域
	</view>
  <tkiTree
			ref="tkitree"
			:foldAll="false"
			:multiple="false"
			:selectParent="true"
			@confirm="confirm"
			@cancel="cancel"
			:range="spaceList"
			rangeKey="label"
			confirmColor="#4e8af7"
		/>
</template>

<script setup>
import tkiTree from "@/components/tki-tree/tki-tree.vue"

let tkitree = ref(null)
let spaceList = ref([
  {
    id:1,
    label: '区域1',
    children: [
      {
        id:2,
        label: '区域1-1',
        children: [
          {
            id:3,
            label: '区域1-1-1',
            children:[
              {
                id:5,
                label: '区域1-1-1-1',
                children:[
                  {
                    id:6,
                    label: '区域1-1-1-1-1',
                  }
                ]
              }
            ]
          },
          {
            id:4,
            label: '区域1-1-2',
          }
        ]
      },
      //......
    ]
  }
])
const handleShowTree = () => {
  //通过ref 获取组件实例上的方法
  // _show()显示选择器
  // _hide()隐藏选择器
	tkitree.value._show();
};

// 返回选中的数据对象数组
const confirm = (e) => {
	console.log('e--', e); //[{...}]
};
// 取消事件的回调
const cancel = (e) => {
	console.log('e', e);
};
</script>

<style lang="scss" scoped>

</style>

组件属性：