element?UI中在?el-select?與?el-tree?結合組件實現(xiàn)過程
前言
項目上實現(xiàn)某個功能，使用到了 el-select 和 el-tree 組合實現(xiàn)，記錄下兩者結合的實現(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 結合組件實現(xiàn)過程的文章就介紹到這了,更多相關el-select 與 el-tree 結合組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了怎樣使你的 JavaScript 代碼簡單易讀，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
一轉眼已經(jīng)臘月了,相信小伙伴們一定想知道我們距離2023新年還有多少天,下面這篇文章主要給大家介紹了關于如何一步步教你用js簡單實現(xiàn)新年倒計時的相關資料,需要的朋友可以參考下2022-12-12
本文主要分享了JavaScript實現(xiàn)星級評分的實例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
JavaScript獲取網(wǎng)頁表單action屬性的方法
這篇文章主要介紹了JavaScript獲取網(wǎng)頁表單action屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
本篇文章主要介紹了js中DOM實現(xiàn)三級列表的代碼，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
JavaScript高階函數(shù)_動力節(jié)點Java學院整理
這篇文章主要介紹了JavaScript高階函數(shù)，詳細講解了什么是高階函數(shù)和高階函數(shù)的用法，有興趣的可以了解下2017-06-06
有一個比較復雜的HTML片段(A)，如果把這個HTML片段嵌入到其他頁面中（B,C,D....）。 問題的關鍵是在HTML片段中有大量的JavaScript邏輯需要處理，比如說分頁，點擊事件響應等。2011-03-03
require.js配合插件text.js實現(xiàn)最簡單的單頁應用程序
這篇文章主要介紹了require.js配合插件text.js實現(xiàn)最簡單的單頁應用程序,需要的朋友可以參考下2016-07-07
下面小編就為大家?guī)硪黄胬斫釰avaScript中的繼承(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細介紹了JS猜數(shù)字游戲實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06