iview實現(xiàn)select tree樹形下拉框的示例代碼
更新時間:2018年12月21日 15:57:22 作者:東方的神秘力量
這篇文章主要介紹了iview實現(xiàn)select tree樹形下拉框的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
本文介紹了iview實現(xiàn)select tree樹形下拉框的示例代碼,分享給大家,具體如下:
html部分
<Tree :data="treeData" ref="tree" :render="renderContent"></Tree>
數(shù)據部分
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); },
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
vue?cli3配置image-webpack-loader方式
這篇文章主要介紹了vue?cli3配置image-webpack-loader方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07解決vue-cli-service不是內部或外部命令也不是可運行的程序或批處理文件的報錯問題
這篇文章主要介紹了解決vue-cli-service不是內部或外部命令也不是可運行的程序或批處理文件的報錯問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06Vue render渲染時間戳轉時間,時間轉時間戳及渲染進度條效果
這篇文章主要介紹了Vue render渲染時間戳轉時間,時間轉時間戳及渲染進度條效果,通過實例代碼相結合的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07Vue3+El-Plus實現(xiàn)表格行拖拽功能完整代碼
在vue3+elementPlus網站開發(fā)中,詳細完成el-table表格的鼠標拖拽/拖曳/拖動排序,下面這篇文章主要給大家介紹了關于Vue3+El-Plus實現(xiàn)表格行拖拽功能的相關資料,需要的朋友可以參考下2024-05-05