vue實現(xiàn)下拉菜單樹
更新時間：2020年10月22日 09:54:20 作者：單飛吧
這篇文章主要為大家詳細介紹了vue實現(xiàn)下拉菜單樹，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)下拉菜單樹的具體代碼，供大家參考，具體內(nèi)容如下
效果：使用 Vue-Treeselect 實現(xiàn)
建議通過npm安裝vue-treeselect，并使用webpack之類的捆綁器來構(gòu)建您的應(yīng)用程序。
npm install --save @riophae/vue-treeselect
官網(wǎng)實例 配置屬性請查看官網(wǎng)
<!-- 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前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue自定義加載指令的相關(guān)知識，主要包括創(chuàng)建加載組件，創(chuàng)建指令的方法，結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue-cli構(gòu)建的小說閱讀器，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue項目如何關(guān)閉語法檢查問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue3項目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因為3.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下2023-12-12
vue項目啟動出現(xiàn)cannot GET /服務(wù)錯誤的解決方法
這篇文章主要介紹了vue項目啟動出現(xiàn)cannot GET /服務(wù)錯誤的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue基礎(chǔ)popover彈出框編寫及bug問題分析
這篇文章主要為大家介紹了Vue基礎(chǔ)popover彈出框編寫及bug問題分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
Proxy是ES6引入的一個新特性，它允許你創(chuàng)建一個代理對象，用于攔截對目標對象的訪問，但用了這么久的vue3，你真的懂Proxy嗎，本文就來和大家深入聊聊Proxy吧2023-06-06
本篇文章主要介紹了解決vue里碰到 $refs 的問題的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Vue文件下載進度條的實現(xiàn)原理,通過使用onDownloadProgress方法API獲取進度及文件大小等數(shù)據(jù)，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07