iview實現(xiàn)select tree樹形下拉框的示例代碼

更新時間：2018年12月21日 15:57:22 作者：東方的神秘力量

這篇文章主要介紹了iview實現(xiàn)select tree樹形下拉框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文介紹了iview實現(xiàn)select tree樹形下拉框的示例代碼，分享給大家，具體如下：

html部分

<Tree :data="treeData" ref="tree" :render="renderContent"></Tree>

數(shù)據(jù)部分

export const treeData= [
  {
    title: 'parent 1',
    expand: true,
    selected: true,
    value: '1',
    children: [
      {
        title: 'parent 1-1',
        expand: true,
        value: '11',
        children: [
          {
            value: '111',
            title: 'leaf 1-1-1'
          },
          {
            value: '112',
            title: 'leaf 1-1-2'
          }
        ]
      },
      {
        title: 'parent 1-2',
        value: '12',
        expand: true,
        children: [
          {
            value: '121',
            title: 'leaf 1-2-1'
          },
          {
            value: '122',
            title: 'leaf 1-2-2'
          }
        ]
      }
    ]
  }
];

js部分

// 子節(jié)點的option
 renderContent (h, { root, node, data }) {
      return h('Option', {
          style: {
            display: 'inline-block',
            margin: '0'
          },
          props:{
            value: data.value
          }
        }, data.title);
    },

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

完美解決iview 的select下拉框選項錯位的問題

相關(guān)文章

詳解Vue3中useLocalStorage的用法
這篇文章主要為大家詳細(xì)介紹了Vue3中useLocalStorage用法的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解一下
2023-10-10
vue 如何設(shè)置背景顏色及透明度
這篇文章主要介紹了vue 設(shè)置背景顏色及透明度的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-06-06
解決vue.js not detected的問題
本文主要介紹了解決vue.js not detected的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
IDEA創(chuàng)建Vue項目的兩種方式總結(jié)
這篇文章主要介紹了IDEA創(chuàng)建Vue項目的兩種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。
2023-04-04
Vue3中provide和inject作用和場景
Vue3中provide和inject作用和場景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實現(xiàn)跨層組件通信,本文通過實例介紹Vue3 provide和inject的相關(guān)知識,感興趣的朋友一起看看吧
2023-11-11
Element-UI 解決el-table中圖片懸浮被遮擋問題小結(jié)
在開發(fā)中,發(fā)現(xiàn)element-ui在el-table中添加圖片懸浮顯示時,會被單元格遮擋的問題,對于此問題解決其實也并不難,將懸浮圖片放在body節(jié)點下,通過定位顯示即可,感興趣的朋友跟隨小編一起看看吧
2024-06-06
Vue?組件之間傳值的主要方法
父組件向子組件傳值，使用 props：可以通過在子組件上綁定 props，然后在父組件中通過 v-bind 綁定相應(yīng)的數(shù)據(jù)來傳遞數(shù)據(jù)，這篇文章主要介紹了Vue?組件之間傳值的方法,需要的朋友可以參考下
2023-12-12
vue項目常用組件和框架結(jié)構(gòu)介紹
這篇文章通過圖文形式給大家介紹了vue項目的骨架及常用組件的相關(guān)知識，對此有興趣的朋友跟著小編一起學(xué)習(xí)參考下吧。
2017-12-12
antd的選擇框如何增加tab選中的方法示例
這篇文章主要為大家介紹了antd的選擇框如何增加tab選中的方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue實現(xiàn)宮格輪轉(zhuǎn)抽獎
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)宮格輪轉(zhuǎn)抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11