詳解vue-element Tree樹(shù)形控件填坑路
通過(guò)tree樹(shù)形控件的default-checked-keys屬性來(lái)設(shè)置默認(rèn)選中的節(jié)點(diǎn)
html.vue
<el-form-item label="角色權(quán)限:"> <el-tree :data="data2" show-checkbox node-key="id" @check="handleNodeClick" :default-expanded-keys="[]" ref="tree" :default-checked-keys="default_select" :props="defaultProps"> </el-tree> </el-form-item>
html.js
data() { return { data2: [], defaultProps: { children: 'child', label: 'name' }, menu_ids: [], // 默認(rèn)選中 default_select: [], role_id: 0, } }, methods: { /** * 獲取詳情 */ getDetail() { let that = this; that.$http.post(that.adminApi.api_url + "/Role/show_edit", { token: that.token, role_id: that.role_id }, { emulateJSON: true }).then( function (res) { var data = res.body; if (data) { that.ruleForm.name = data.name; that.ruleForm.sort = data.sort; that.ruleForm.status = data.status.toString(); /**重點(diǎn)開(kāi)始*/ if(typeof (data.menu_id) == 'object'){ //轉(zhuǎn)數(shù)組 data.menu_id = Object.keys(data.menu_id).map(key=> data.menu_id[key]); } //賦值 data.menu_id.forEach((value)=>{ that.default_select.push(value); }); setTimeout(function () { that.default_select.forEach((value)=>{ that.$refs.tree.setChecked(value,true,false) }); },100); that.menu_ids = data.menu_id; /**重點(diǎn)結(jié)束*/ } }); }, /** * 屬性控件 */ handleNodeClick(e, data) { console.log(data); console.log(e); this.menu_ids = data.checkedKeys }, }
總結(jié),Tree樹(shù)形控件通過(guò)后臺(tái)接口獲取到數(shù)組數(shù)據(jù),還需要再次遍歷,將它再遍歷為數(shù)組,這樣我們才可以調(diào)用,如果直接從后臺(tái)獲取到數(shù)組來(lái)調(diào)用的時(shí)候,我們是獲取不到這個(gè)數(shù)組中的內(nèi)容。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue @input和@click的區(qū)別及說(shuō)明
這篇文章主要介紹了vue @input和@click的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng)的思路詳解
這篇文章主要介紹了基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11Vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁(yè)的示例代碼
本文主要介紹了Vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁(yè)的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08關(guān)于vue中根據(jù)用戶(hù)權(quán)限動(dòng)態(tài)添加路由的問(wèn)題
每次路由發(fā)生變化時(shí)都需要調(diào)用一次路由守衛(wèi),并且store中的數(shù)據(jù)會(huì)在每次刷新的時(shí)候清空,因此需要判斷store中是否有添加的動(dòng)態(tài)路由,本文給大家分享vue中根據(jù)用戶(hù)權(quán)限動(dòng)態(tài)添加路由的問(wèn)題,感興趣的朋友一起看看吧2021-11-11KKFileView結(jié)合vue多格式文件在線(xiàn)預(yù)覽功能實(shí)現(xiàn)
kkFileView是git的開(kāi)源在線(xiàn)文件預(yù)覽項(xiàng)目,這篇文章主要介紹了KKFileView結(jié)合vue多格式文件在線(xiàn)預(yù)覽功能,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02基于Vue實(shí)現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出
這篇文章主要為大家介紹了三種方法,可以實(shí)現(xiàn)將HTML頁(yè)面轉(zhuǎn)為PDF并實(shí)現(xiàn)下載。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04