亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解vue-element Tree樹(shù)形控件填坑路

 更新時(shí)間:2019年03月26日 10:56:19   作者:MRZYD  
這篇文章主要介紹了vue-element Tree樹(shù)形控件填坑路,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

通過(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.js 中制作自定義選擇組件的代碼附演示demo

    Vue.js 中制作自定義選擇組件的代碼附演示demo

    這篇文章主要介紹了Vue.js 中制作自定義選擇組件的代碼附演示demo,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-02-02
  • vue @input和@click的區(qū)別及說(shuō)明

    vue @input和@click的區(qū)別及說(shuō)明

    這篇文章主要介紹了vue @input和@click的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue防抖與節(jié)流的使用介紹

    Vue防抖與節(jié)流的使用介紹

    防抖和節(jié)流的作用都是防止函數(shù)多次調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue函數(shù)防抖與節(jié)流的正確使用方法,需要的朋友可以參考下
    2022-12-12
  • 基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng)的思路詳解

    基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng)的思路詳解

    這篇文章主要介紹了基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11
  • Vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁(yè)的示例代碼

    Vue實(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)題

    關(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-11
  • KKFileView結(jié)合vue多格式文件在線(xiàn)預(yù)覽功能實(shí)現(xiàn)

    KKFileView結(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.directive 自定義指令

    詳解Vue.directive 自定義指令

    這篇文章主要介紹了Vue.directive 自定義指令,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • Vue路由模塊化配置的完整步驟

    Vue路由模塊化配置的完整步驟

    這篇文章主要給大家介紹了關(guān)于Vue路由模塊化配置的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • 基于Vue實(shí)現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出

    基于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

最新評(píng)論