react -> antd （Table 與 Cascader 平級數據轉樹形實操）

時間 2019-12-05

標籤 react antd table cascader 平級數據欄目 React 简体版

原文原文鏈接

若是你剛開始學習前端或者 React，將 UI 框架做爲你的第一步可能不是最好的主意。 (這是引用antd官網的一句話)，雖說一開始用antd做爲UI框架對新手來講並非很好，可是若是工做須要呢，那就不得不這樣作了。css

下面我就挑兩個經常使用並且對新手稍微有點難度組件來進行講解，分別是table 表格和 Cascader級聯選擇。前端

antd -> Table 樹形數據展現

效果以下：react

第一步：打開連接，完成安裝和初始化和引入antd兩個步驟；bash

第二步：把src裏面的文件所有刪除，而後分別建立 App.js 、 data.js 、 index.jsantd

index.js 代碼以下:app

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/lib/button/style';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
複製代碼

data.js 是我封裝的數據，代碼以下：框架

export default class Model {
     static get(){
         const datas=[
            {
                id:'01',
                name:"第一級01",
                children:[
                    {
                        id:'001',
                        name:"第二級01",
                        children:[
                          {
                            id:'0001',
                            name:'第三級01'
                          },
                          {
                            id:'0002',
                            name:'第三級02'
                          }

                        ]
                    },
                    {
                        id:'002',
                        name:'第二級02',
                    }
                ]
            },
            {
                id:'02',
                name:'第一級02',
            },
          ]
          return datas;
     }
}

複製代碼

App.js 開始使用Table進行實操啦，代碼以下：dom

import React, { Component } from 'react';
import Model from './data'
import {Table} from 'antd';
import 'antd/dist/antd.css';
const columns = [{
    title: '編碼',
    dataIndex: 'id',
  }, {
    title: '名稱',
    dataIndex: 'name',
  }
  ];
export default class App extends Component{
    state={
        tableData:[],  //表格數據
    }
    componentDidMount () {
        // 獲取數據樹
        this.handleDataTree();
    }
    handleDataTree=()=>{
      // 獲取data.js裏面的數據
      const da = Model.get();
       if(da && da.length>0){
        this.handleGetChild(da);
          this.setState({
            tableData:da,
          })
       }
    }
    handleGetChild = (data) =>{
          for(let x = 0,le =data.length; x<le;x +=1){
            data[x] = {
              ...data[x],
              key:data[x].id,
              code:data[x].id,
              name:data[x].name,
            }
            if (data[x].children && data[x].children.length > 0) {
              this.handleGetChild(data[x])
            }
          }
      }
    render(){
        return(
            <div>
              <Table 
                columns={columns} 
                dataSource={this.state.tableData} 
                pagination={false} //不展現分頁器，若是須要刪除該行代碼便可
                rowKey={recode => recode.id}  //表格行的key
            />
            </div>
        )
    }
}
複製代碼

注意： 1.Table裏面帶的參數能夠看官網的API。函數

2.若是隻想展現到某一級的話就只須要在調用this.handleGetChild(da,index);的時候傳遞一個數據（就是代碼裏的index），而後再學習

if (data[x].children && data[x].children.length > 0) {
              this.handleGetChild(data[x]，index+1)
            }
複製代碼

這段代碼裏面加上一個index+ 1 最後在寫一個if語句判斷一下就能夠。

細講：函數handleDataTree() 在獲取到數據後判斷，若是數據的長度大於1那麼就會先執行handleGetChild()而後再把數據傳遞給this.state.tableData。至於這裏爲何要調用函數來處理數據而不是直接處理數據的緣由是：

若是數據只有一兩層那還好，直接寫就是了，可是若是數據有N層了呢，那就很複雜了，因此採用``````handleGetChild() ```把數據傳過去而後解析，若是這條數據裏面的chilidren還有值的話，就再調用一下這個函數。這樣不管數據有多少層就均可以輕鬆展現了。

antd-Cascader 級聯選擇（把平級數據改成樹形）

除了App.js 和data.js 這兩個頁面的代碼跟上面的不同，其餘的操做都是同樣的，咱們先來看下效果：

data.js 代碼以下：

export default class Model {
     static get(){
         const datas=[
            {id:'01',
              name:'第一層01',
              parentId:'0'
            },
            {id:'001',
              name:'第二層001',
              parentId:'01'
            },
            {id:'002',
              name:'第二層002',
              parentId:'01'
            },
            {id:'0010',
              name:'第三層0010',
              parentId:'001'
            },
            {id:'0020',
              name:'第三層0020',
              parentId:'002'
            },
            {id:'0021',
              name:'第三層0021',
              parentId:'002'
            },

          ]
          return datas;
     }
}

複製代碼

App.js 代碼以下：

import React, { Component } from 'react';
import Model from './data'
import {Cascader} from 'antd';
import 'antd/dist/antd.css';
export default class App extends Component{
    state={
      cascaderData:[],  //數據
    }
     onChange=(value)=> {
      console.log(value);
    }
    componentDidMount () {
        // 獲取數據樹
        this.handleDataTree();
    }
    handleDataTree=()=>{
      // 獲取data.js裏面的數據
      const da = Model.get();
      if(da && da.length>0){
        let dataMap = {};
        da.forEach((item)=>{
           dataMap[item.id]={key:item.id,value:item.id,label:item.name,parentId:item.parentId}
        })
        let root={};
        for(const key in dataMap){
          if(key){
            const {parentId} = dataMap[key];
            if(parentId === '0'){
              root = dataMap[key]
            }else if(dataMap[parentId]){
              if(!dataMap[parentId].children){
                dataMap[parentId].children=[]
              }
              dataMap[parentId].children.push(dataMap[key])
            }
          }
        }
        this.setState({
          cascaderData:[root]
        })
      }
    }
    render(){
        return(
            <div>
               <Cascader options={this.state.cascaderData} onChange={this.onChange} placeholder="Please select" />
            </div>
        )
    }
}
複製代碼