react -> antd (Table 与 Cascader 平级数据转树形实操)

栏目: 服务器 · 发布时间: 6年前

内容简介:如果你刚开始学习前端或者 React,将 UI 框架作为你的第一步可能不是最好的主意。 (这是引用antd官网的一句话),虽然说一开始用antd作为UI框架对新手来说并不是很好,但是如果工作需要呢,那就不得不这样做了。下面我就挑两个常用而且对新手稍微有点难度组件来进行讲解,分别是效果如下:

如果你刚开始学习前端或者 React,将 UI 框架作为你的第一步可能不是最好的主意。 (这是引用antd官网的一句话),虽然说一开始用antd作为UI框架对新手来说并不是很好,但是如果工作需要呢,那就不得不这样做了。

下面我就挑两个常用而且对新手稍微有点难度组件来进行讲解,分别是 table 表格Cascader 级联选择

antd -> Table 树形数据展示

效果如下:

react -> antd (Table 与 Cascader 平级数据转树形实操)

第一步:打开链接,完成 安装和初始化引入antd 两个步骤;

第二步:把src里面的文件全部删除,然后分别创建 App.jsdata.jsindex.js

index.js代码如下:

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进行实操啦,代码如下:

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.jsdata.js 这两个页面的代码跟上面的不一样,其他的操作都是一样的,我们先来看下效果:

react -> antd (Table 与 Cascader 平级数据转树形实操)

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>
        )
    }
}
复制代码

这里需要注意的是如果想要完成改代码就需要找到 子元素的某个数据 = 父元素的某个数据 ,只有找到这个原理才能完成这个效果。

这里的 const {parentId} = dataMap[key]; 是把dataMap[key]里的parentId解构出来。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++编程风格

C++编程风格

卡吉尔 / 聂雪军 / 机械工业出版社发行室 / 2007-1 / 25.00元

本书描述C++语言中较深层次的程序设计思想和使用方法,包含大量软件工程概念和设计模式,重点介绍大规模编程相关的内容,例如增加代码的可读性、可维护性、可扩展性以及执行效率等的方法。本书的示例代码都是从实际程序中抽取出来的,融人了作者的实际开发经验。讲解如何正确地编写代码以及避开一些常见的误区和陷阱,并给出了许多实用的编程规则,可快速提升读者的C++编程功力。   本书描述平实,示例丰富,适合有......一起来看看 《C++编程风格》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器