vue實現下拉菜單樹
更新時間：2020年10月22日 09:54:20 作者：單飛吧
這篇文章主要為大家詳細介紹了vue實現下拉菜單樹，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現下拉菜單樹的具體代碼，供大家參考，具體內容如下
效果：使用 Vue-Treeselect 實現
建議通過npm安裝vue-treeselect，并使用webpack之類的捆綁器來構建您的應用程序。
npm install --save @riophae/vue-treeselect
官網實例 配置屬性請查看官網
<!-- Vue SFC -->
<template>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</template>
<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
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',
} ],
}
},
}
</script>
更多教程點擊《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇基于axios 解決跨域cookie丟失的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了在vant 中使用cell組件 定義圖標該圖片和位置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了關于Echarts餅圖圖例太長的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了vuex中使用modules時遇到的坑及問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
全局變量（函數等）可以在任意組件內訪問,可以當組件間的傳值使用,這篇文章給大家介紹vue3 定義使用全局變量的示例詳解,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了VUE多個DIV綁定回車事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-10-10
這篇文章主要介紹了vue樹形結構獲取鍵值的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
vue-cli3.0+element-ui上傳組件el-upload的使用
這篇文章主要介紹了vue-cli3.0+element-ui上傳組件el-upload的使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
當頁面數據過多,前端渲染大量的DOM時,會造成頁面卡死問題,本文主要介紹了element表格el-table實現虛擬滾動解決卡頓問題,具有一定的參考價值,感興趣的可以了解一下2023-10-10
Vue2.0用 watch 觀察 prop 變化(不觸發(fā))
本篇文章主要介紹了Vue2.0用 watch 觀察 prop 變化(不觸發(fā))，非常具有實用價值，需要的朋友可以參考下2017-09-09