插件下载地址https://ext.dcloud.net.cn/plugin?id=8669
页面调用

<template>
	<view class="container">
		<view class="fenlei">
			<view >
				归属分类
			</view>
			<view class="">
				<button type="default" class='typebtn' @click="showPicker">{{typecontent}}</button>
			</view>
			<ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择分类"
			    :localdata="listData" valueKey="id" textKey="assetTypeName" childrenKey="children" />
		</view>
		<view class="">
		</view>
		<view class="nextbox">
			<button type="default" class='chognzhibtn' hover-class="login-hover" @click="clearbtn()">重置</button>
			<button type="default" class='nextbtn' hover-class="login-hover" @click="toassetlist()">确定</button>
		</view>
	</view>
</template>

<script>
	import { ref, reactive, getCurrentInstance, watch, computed } from 'vue'
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	
	export default {
		components: {
			baTreePicker
		},
		data() {
			return {
				typecontent:'请选择分类',
				assetTypeId:'',
				listData:[
					// {
					// 	id: 1,
					// 	name: '公司1',
					// 	children: []
					// },
					// {
					// 	id: 2,
					// 	name: '公司2',
					// 	children: [{
					// 		id: 21,
					// 		name: '研发部',

					// 	},{
					// 		id: 22,
					// 		name: '综合部',

					// 	}]
					// },
					// {
					// 	id: 3,
					// 	name: '公司3'
					// },
					// {
					// 	id: 4,
					// 	name: '公司4',
					// 	children: [{
					// 		id: 41,
					// 		name: '研发部',
					// 	}]
					// }
				]
				
			}
		},
		onLoad(options) {
			this.gettypelist()
		},
		methods: {
			 // 显示选择器
			showPicker() {
				this.$refs.treePicker._show();
			},
			//监听选择(ids为数组)
			selectChange(ids, names) {
				// console.log(ids, names)
				this.typecontent=names
				this.assetTypeId=ids[0]
			},
			// 归属分类
			gettypelist(){
				let { proxy } = getCurrentInstance()
				this.proxy=proxy
				this.proxy.$request('/api/asset/type/treeSelect', {
				},"GET").then(res => {
					console.log(res)
					this.listData=res.data
					if (res.code==500) {
						console.log(res)
						this.proxy.$Toast(res.msg)
					}
				})
			},
			clearbtn(){
				this.typecontent='请选择分类'
				this.assetTypeId=''
			},
		 
		}
	}
</script>

<style  lang="scss" scoped>

</style>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐