uniapp 树形选择数据

不用 npm 引入，直接用 HBX 引入就行 https://ext.dcloud.net.cn/plugin?id=702

 

tki-tree 默认会下载到 compents 底下，可以移动到 common 底下也可以不移动

import tkiTree from "@/common/tki-tree/tki-tree.vue"

components: {
	  tkiTree,
	},

 

这里 的 chapterList 是数据列表，后端返回必须是树形结构 ，也必须包含了 childred 属性

openTree

//这个方法用于获取树形结构中的数据
selectAsc(e){
			this.form.chapterId = e[0].id
		},

　　

这个方法用于打开树形结构进行选择

<u-button size="mini" @click="openTree()">打开章节选择</u-button>
<tki-tree ref="tkitree" :selectParent="true" :range="chapterList" rangeKey="name" @confirm="selectAsc" confirmColor="#4e8af7"/>

　　

openTree(){
			this.$refs.tkitree._show();
		},