Vue treeselect 樹形下拉元件
阿新 • • 發佈:2021-01-11
技術標籤:vuejsjavascript
Vue treeselect 樹形下拉元件
實現
– HTML
<template>
<div id="app">
<treeselect
v-model="value" // 屬性值雙向繫結
:multiple="true" // 多選
:options="options" // 要設定的選項引數
:normalizer="propTreeNormalizer" // // 如果後臺返回的資料 與vue-treeselect要求的資料結構不同, 可以使用此屬性
noOptionsText = "暫無資料" // 沒有選擇文字
noResultsText = "暫無搜尋結果" // 沒有結果的文字
placeholder="請選擇" // 佔位符
:flat="true" // 多選時如果子集全選中, 顯示框中展示的是所有子集的名稱, 如果值為false,子集全選中時 顯示框中只展示父級的名字
:default-expand-level="1" // 預設展開第一級
:disable-branch-nodes="true" // 多選時 父級不顯示多選框
/>
</ div>
</template>
– js
<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
// register the component
// Vue.component('treeselect', VueTreeselect.Treeselect)
components: { Treeselect },
data() {
return {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
}
},
methods:{
// 如果後臺返回的資料 與vue-treeselect要求的資料結構不同,例如,您的資料具有name屬性,但vue-treeselect需要label,則可能需要自定義鍵名, 使用 :normalizer="propTreeNormalizer"
propTreeNormalizer(node) {
return {
id:node.id,
label:node.title,
children: node.childs
}
},
// 如果後臺返回的資料 與vue-treeselect要求的資料結構不同,也可以自己轉化資料, 將後臺的資料傳進 getTreeData函式中,得到是值給options
getTreeData(val) {
let arr = [];
val.forEach(element =>{
let obj = {
id: element.id,
label: element.name
}
if(element.childs && element.childs.length >0) {
obj.children = this.getTreeData(element.childs);
}
arr.push(item)
})
return arr;
}
}
}
</script>