element?UI中在?el-select?與?el-tree?結(jié)合組件實現(xiàn)過程
前言
項目上實現(xiàn)某個功能，使用到了 el-select 和 el-tree 組合實現(xiàn)，記錄下兩者結(jié)合的實現(xiàn)過程。
要求根據(jù)項目接口提供的數(shù)據(jù)，el-tree 里的數(shù)據(jù)是一次性返回來的，點擊最后一層級時，請求接口，在點擊層級下方追加數(shù)據(jù)追加的數(shù)據(jù)要顯示勾選框，可進行勾選，且是單選勾選后需要返回勾選的層級以及它的父級
實現(xiàn)效果如下：
數(shù)據(jù)回顯效果：
實現(xiàn)關鍵部分
el-tree里的顯示勾選框不符合當前“追加的數(shù)據(jù)要顯示勾選框，可進行勾選”這個需求，所以我修改了el-tree的源碼進行使用。
追加子級數(shù)據(jù)，el-tree 文檔提供了這個這個方法，可以追加子級
數(shù)據(jù)對象里有指定字段才顯示勾選框，這里我指定字段為 currentShowCheck，數(shù)據(jù)追加的時候把指定需要顯示勾選框的字段加上
let data=[
{
label:'追加1',
currentShowCheck:true
},
{
label:'追加2',
currentShowCheck:true
}
]
修改源碼，數(shù)據(jù)中有 currentShowCheck 字段的則顯示 checkbox
<!-- 顯示 checkbox 有指定字段才顯示 checkbox currentShowCheck-->
<el-checkbox
v-if = "showCheckbox && node.data.currentShowCheck"
v-model="node.checked"
:indeterminate="node.indeterminate"
:disabled="!!node.disabled"
@click.native.stop
@change="handleCheckChange
>
</el-checkbox>
<span
v-if="node.loading"
class="el-tree-node__loading-icon el-icon-loading">
</span>
<node-content : node="node"></node-content>
這樣子就實現(xiàn)以上的效果了
到此這篇關于element UI中在 el-select 與 el-tree 結(jié)合組件實現(xiàn)過程的文章就介紹到這了,更多相關el-select 與 el-tree 結(jié)合組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
當用戶勾選顯示明文復選框時，要以明文顯示用戶輸入的密碼，去掉勾選時要變回密文，問題是ie8中是不允許修改input的type屬性2014-09-09
js Object2String方便查看js對象內(nèi)容
這篇文章主要介紹了將JS的任意對象輸出為json格式字符串的方法,需要的朋友可以參考下2014-11-11
本篇文章主要介紹了解決瀏覽器會自動填充密碼問題的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
JavaScript高級程序設計 讀書筆記之十 本地對象Date日期
本地對象Date日期操作實現(xiàn)方法，需要的朋友可以參考下2012-02-02
JavaScript 開發(fā)工具webstrom使用指南
本文給大家推薦了一款非常熱門的javascript開發(fā)工具webstrom,著重介紹了webstrom的特色功能、設置技巧、使用心得以及快捷鍵匯總，非常的全面。2014-12-12
本文主要介紹了原生JS實現(xiàn)幻燈片的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
微信小程序?qū)崿F(xiàn)頂部普通選項卡效果(非swiper)
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)頂部普通選項卡效果，非swiper，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
通過js動態(tài)創(chuàng)建標簽,并設置屬性方法
下面小編就為大家分享一篇通過js動態(tài)創(chuàng)建標簽，并設置屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了PHP配置文件php.ini中打開錯誤報告的設置方法,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)本地分頁加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08