前言
-
在實(shí)際開發(fā)中我們經(jīng)常遇見樹結(jié)構(gòu)-比如樓層區(qū)域-組織架構(gòu)-部門崗位-系統(tǒng)類型等情況
-
往往需要把這個樹結(jié)構(gòu)當(dāng)成條件來查詢數(shù)據(jù)，在PC端可以使用Tree，table，Treeselect等組件展示
-
在uni-app的內(nèi)置組件中似乎沒有提供這樣組件來展示，但是是有第三方包tkiTree組件來解決這個問題
-
我是基本使用，通過確認(rèn)之后傳遞id和name形式來使用，據(jù)說深層次使用會有很多bug（需要自己嘗試）
官網(wǎng)包地址：樹形選擇器增強(qiáng)版，支持多選、單選、父級選擇，Picker形式 - DCloud 插件市場
細(xì)節(jié)
-
該組件是沒有提供v-model，通過確定事件獲取到選擇值，傳遞給input和form表單，
-
該組件默認(rèn)選中-只需要在該節(jié)點(diǎn)設(shè)置checked:true（就會默認(rèn)選中）
-
該組件沒有類似prop這樣的配置選項(xiàng)，就說明我們樹結(jié)構(gòu)的形式必須是（id，name，children）
-
該組件通過官網(wǎng)下載到HBuilder X之后會在components下，HBuilder X提示你需要把包放在分包里面
-
把組件全局注冊就可以解決上面的問題，HBuilder X提示（?自定義組件 components/tki-tree/tki-tree 建議移動到子包 subpkg 內(nèi)）- 就會消失
代碼實(shí)現(xiàn)
1.通過上面官網(wǎng)地址去到插件市場-點(diǎn)擊下載插件并導(dǎo)入HBuilder X-會在components下出現(xiàn)-- 下載插件需要HBuilder 賬號密碼登錄
2.全局注冊組件-防止HBuilder X提示（?自定義組件 components/tki-tree/tki-tree 建議移動到子包 subpkg 內(nèi)）
// 樹結(jié)構(gòu)組件
import tkiTree from "@/components/tki-tree/tki-tree.vue"
// 掛載全局組件
Vue.component('tkiTree', tkiTree)具體頁面代碼
<template>
<view class="Treeform">
選擇城市: <uni-easyinput @focus="focusfloor" v-model="form.floorName" placeholder="選擇城市"></uni-easyinput>
<!-- 樹形組件 -->
<tki-tree ref="tkitree" :range="floorlist" :foldAll="foldAll" :multiple="multiple" :selectParent="selectParent"
rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree>
</view>
</template>
?
<script>
export default {
name: 'Tree',
data() {
return {
// 表單值
form: {
// 城市id
floorID: null,
// 城市名稱
floorName: null
},
// 樹結(jié)構(gòu)配置\
// 是否默認(rèn)展開上一次打開-默認(rèn)不打開
foldAll: true,
// 是否多選-默認(rèn)單選
multiple: false,
// 是否可以選擇父級-默認(rèn)不能
selectParent: false,
// 樹形數(shù)據(jù)
floorlist: [{
id: 1,
name: '中國',
children: [{
id: 2,
name: '廣東',
children: [{
id: 4,
name: "惠州",
// 默認(rèn)選中
checked:true
},
{
id: 5,
name: "仲愷"
},
{
id: 6,
name: '深圳'
}
]
}, {
id: 3,
name: '湖北'
},
{
id: 8,
name: '福建'
}
]
}],
};
},
methods: {
// 輸入款獲取焦點(diǎn)事件
focusfloor() {
console.log('輸入款獲取焦點(diǎn)了');
// 打開樹形選擇器
this.$refs.tkitree._show();
},
// 確定回調(diào)事件
treeConfirm(e) {
console.log(e)
// 必須選擇
if (e.length == 0) {
return console.log('請先選擇樓層');
}
// 傳遞樓層id
this.form.floorID = e[0].id
// 傳遞樓層名稱
this.form.floorName = e[0].name
},
// 取消回調(diào)事件
treeCancel(e) {
console.log(e)
},
}
}
</script>
?
<style lang="scss">
.Treeform {
display: flex;
align-items: center;
}
</style>總結(jié)：
經(jīng)過這一趟流程下來相信你也對 uni-app-使用tkiTree組件實(shí)現(xiàn)樹形結(jié)構(gòu)選擇 有了初步的深刻印象，但在實(shí)際開發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！文章來源：http://www.zghlxwxcb.cn/news/detail-629943.html
什么不足的地方請大家指出謝謝 -- 風(fēng)過無痕文章來源地址http://www.zghlxwxcb.cn/news/detail-629943.html
到了這里，關(guān)于uni-app-使用tkiTree組件實(shí)現(xiàn)樹形結(jié)構(gòu)選擇的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
