国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue+element tree(樹形控件數據格式)組件(1)

Pines_Cheng / 2347人閱讀

摘要:樹形控件數據格式組件最近做了第一個組內可以使用的組件,雖然是最簡版,也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。

vue+element tree(樹形控件數據格式)組件(1),

最近做了第一個組內可以使用的組件,雖然是最簡版,也廢了不少力。各位前輩幫我解決問題,才勉強搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。

首先說說需求,就是點擊出現彈窗+蒙板,彈窗內容是一個樹組件當然,什么彈窗大小啊,是否顯示多選框,默認選中,通過關鍵字過濾節點(element都自帶好了)幾個常用功能都封進來,等以后用到別的的時候再往里加。都解決了)

今天先記錄處理數據的問題

與后臺交流后得知通過接口會拿到這樣的數據:

[
            { id: "01", label: "測試活動", pId: "1" },
            { id: "011", label: "測試活動1", pId: "01" },
            { id: "012", label: "測試活動2", pId: "01" },
            { id: "02", label: "測試活動3", pId: "1" },
            { id: "021", label: "測試活動4", pId: "02" },
            { id: "022", label: "測試活動5", pId: "02" },
            { id: "0221", label: "測試活動6", pId: "022" },
            { id: "0222", label: "測試活動7", pId: "022" },
            { id: "0223", label: "測試活動6", pId: "022" },
            { id: "0224", label: "測試活動7", pId: "022" },
            { id: "0225", label: "測試活動6", pId: "022" },
            { id: "0226", label: "測試活動7", pId: "022" },
        ]

而我們查看element的文檔會看到想要用他們的插件數據格式是這樣的

    [{
        id: 4,
        label: "二級 1-1",
        children: [{
          id: 9,
          label: "三級 1-1-1"
        }, {
          id: 10,
          label: "三級 1-1-2"
        }]
      }]
    }, {
      id: 2,
      label: "一級 2",
      children: [{
        id: 5,
        label: "二級 2-1"
      }, {
        id: 6,
        label: "二級 2-2"
      }]
    }, {
      id: 3,
      label: "一級 3",
      children: [{
        id: 7,
        label: "二級 3-1"
      }, {
        id: 8,
        label: "二級 3-2"
      }]
    }]

那這就要我們處理數據了,先上js代碼

// 循環出父節點

export function toTreeData(data,id,pid,name) {
// 建立個樹形結構,需要定義個最頂層的父節點,pId是1
    let parent = [];
    for (let i = 0; i < data.length; i++) {

        if(data[i][pid] !== "1"){
        }else{
          let obj = {
            label: data[i][name],
            id: data[i][id],
            children: []
          };
          parent.push(obj);//數組加數組值
        }
        // console.log(obj);
        //  console.log(parent,"bnm");

    }
    children(parent);

// 調用子節點方法,參數為父節點的數組
function children(parent) {
console.log(parent)
      if (data.length !== 0) {
        for (let i = 0; i < parent.length; i++) {
          for (let j = 0; j < data.length; j++) {
            if (parent[i].id == data[j][pid]){
              let obj = {
                label: data[j][name],
                id: data[j][id],
                children: []
              };
              parent[i].children.push(obj);
            }
          }
          children(parent[i].children);
        }
      }
    }
    console.log(parent,"bjil")
    return parent;
  }
  toTreeData(this.data,"id","pid","label")//這樣調用就好使了

上面函數接的四個值分別是data所有數據 id id的那個字段名字 pid 父類id的字段名字 name 內容的字段名字 (因為傳過來的字段不一定叫 id pid label所以寫活的)

  toTreeData(this.data,"id","pid","label")//這樣調用就好使了
  //這個回調函數作用當然是轉換數組的格式

多帶帶拿出來這個函數不回調的時候它的作用就是你傳入父元素組成的數組,它會把每一個父元素的直屬子元素壓入父元素的children字段中去,這樣我們只需要把新生成的子元素組成的數組當做下一次調用的父元素數組調用這個函數它就會繼續往里面深入

原作者文章地址:https://www.cnblogs.com/dongy...

方法二:最近在gayhub上看到的 萬能啊這個
getListData(data, config) {
    var id = config.id || "id";
    var pid = config.pid || "pid";
    var children = config.children || "children";
    // var label=config.label || "LctnName";
    var idMap = {};
    var jsonTree = [];
    data.forEach(function (v) {
        idMap[v[id]] = v;
    });
    data.forEach(function (v) {
        var parent = idMap[v[pid]];
        if (parent) {
            !parent[children] && (parent[children] = []);
            parent[children].push(v);
        } else {
            jsonTree.push(v);
        }
    });
    return jsonTree;
}

getListData(
    data.rows, 
    {
        id: "ID",
        pid: "ParentID",
        children: "children"
    }
);

附上gayhub地址 :
把扁平化的數據轉換成樹形結構的JSON

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54639.html

相關文章

  • vue+element tree(樹形控件數據格式)組件(1)

    摘要:樹形控件數據格式組件最近做了第一個組內可以使用的組件,雖然是最簡版,也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 vue+element tree(樹形控件數據格式)組件(1), 最近做了第一個組內可以使用的組件,雖然是最簡版,也廢了不少力。各位前輩幫我解決問題,才勉強搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 首先說說需求,就是點擊出現彈窗+蒙板...

    wangdai 評論0 收藏0
  • 一個基于vueelement-ui的樹形穿梭框組件

    摘要:在市面上找到一個好用的樹形穿梭框組件都很難,又不想僅僅因為一個穿梭框在之外引入其他重量級插件,因此就有了。版本增加穿梭框左側右側數據勾選事件,穿梭框左側右側底部。 el-tree-transfer 簡介·請先閱讀文檔及版本說明 因為公司業務使用vue框架,ui庫使用的element-ui。在市面上找到一個好用的vue樹形穿梭框組件都很難,又不想僅僅因為一個穿梭框在element-ui之...

    Corwien 評論0 收藏0
  • element-ui中el-tree樹形控件-樹節點的選擇(選中當前節點,獲取當前id并且獲取其父級

    摘要:在的樹形控件中默認獲取選取當前選中的方法是但是如果子節點不是全部選中的話,父節點算不選中。由于我們一般想要的是就算只選中一個直接點父節點以及其父輩都算選中,所以需要自己寫邏輯。 在element-ui的el-tree樹形控件中默認獲取選取當前選中id的方法是this.$refs.tree.getCheckedKeys();但是如果子節點不是全部選中的話,父節點算不選中。由于我們一般想要...

    MobService 評論0 收藏0
  • 基于vue.js實現樹形表格的封裝

    摘要:此頁面是實現樹表格的關健頁面。這里就是關健點,因為這個子組件是需要遞歸實現,所以,需要動態注冊到當前組件中。補充一點不要只看部分,部分才是這個樹表格的關健所在。 基于vue.js實現樹形表格的封裝(vue-tree-table) 前言 由于公司產品(基于vue.js)需要,要實現一個樹形表格的功能,百度、google找了一通,并沒有發現很靠譜的,也不是很靈活。所以就用vue自己擼了一個...

    yedf 評論0 收藏0

發表評論

0條評論

Pines_Cheng

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<