uniapp树形层级选择器
插件下载地址https://ext.dcloud.net.cn/plugin?
·
插件下载地址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>
更多推荐
所有评论(0)