vue如何實(shí)現(xiàn)下拉菜單樹

發(fā)布時(shí)間：2020-10-26 16:01:42 來源：億速云閱讀：161 作者：Leah 欄目：開發(fā)技術(shù)

本篇文章給大家分享的是有關(guān)vue如何實(shí)現(xiàn)下拉菜單樹，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

效果：使用 Vue-Treeselect 實(shí)現(xiàn)

建議通過npm安裝vue-treeselect，并使用webpack之類的捆綁器來構(gòu)建您的應(yīng)用程序。

npm install --save @riophae/vue-treeselect

官網(wǎng)實(shí)例配置屬性請(qǐ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如何實(shí)現(xiàn)下拉菜單樹，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

vue如何實(shí)現(xiàn)下拉菜單樹

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽