antd表格

import React from "react";
import {Card,Table} from "antd";
import axios from "axios";

export default class BasicTable extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state={
            dataSource:""
        };
    }
    componentDidMount(){
        const  data=[{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },];
        axios.get("https://www.easy-mock.com/mock/5bb61edebaa7dc5e5e8d18d0/mockapi/table/basic").then(data=>{
            const data1=data.data;
            if(data1.code!=1){
                console.log(data1.result)
                this.setState({dataSource:data1.result})
            }

        })

       // this.setState({dataSource:data})
    }

    render(){
        const columns = [
                            {
                              title:"id",
                              dataIndex:"id",
                            },{
                                title:"名字",
                                dataIndex:"name",
                            },{
                                title:"年龄",
                                dataIndex:"age",
                            },{
                                title:"地址",
                                dataIndex:"address",
                            },{
                                title:"其他",
                                dataIndex:"other",
                            },
                ];


        return(<div>
            <Card>
                <Table
           columns={columns}
            dataSource={this.state.dataSource}
           bordered
           pagination={{"defaultPageSize":5}}
           size="small"
                />
            </Card>
        </div>)
    }
}

table的几个属性:感觉跟ext的差不多

columns  列 的名字 表头 有个dataindex的属性 代表数据字段映射,title是标题

dataSource 的属性 是数据源 一般默认为数组 对象

size是展示风格

bordered是表格是否显示

pagination 代表是分页的配置项 ,是个对象。如果传入false就隐藏了

如果需要根据后端传值去渲染; 就像ext那样 写render函数就可以了  有个写法不错 :假设条件很多那么这样写会比较好

render(v){
  
    const config = {
       1:"a",
       2:"b",
       3:"c",...

    }

    return config[v];
}

render里还可以去渲染一些自己的小图标 使用antd的Badge ;

 

 render(){
      return <Badge status="error" text="警告"   />
                }

如果需要操作(增删改查)  那么这么渲染 

这边说下删除  

 render:(text,index)=>{
                     return <a  onClick={this.deleteItem.bind(this,index.key)}>delete</a>
                }

注意给render函数一个箭头函数绑定到自己不然就绑定到table了; 

在函数里进行业务逻辑操作 如 删除 二次确认 以及 删除完成以后刷新页面等等 ;

 

 

这边最左边的 选择框分为两种(一般也是用 checkbox,不使用radio)

两个属性 

rowSelection   //配置属性

<table  rowSelection={rowSelection} >


//在外面定义常量配置
 const rowSelection= {
            selectedRowKeys:this.state.select,
            type: "checkbox",
            onChange: this.rowSelectionHandle.bind(this)
        };


// onchange事件和state绑定


 rowSelectionHandle(selectedRowKeys, selectedRows){

        this.setState({select:selectedRowKeys});

     //  setTimeout(()=>{console.log(this.state.select)},0)

    }

//state
this.state={
            dataSource:[],
            select:[]
        };

  还有要实现点击行内 选中 的功能 ;

  

<table
rowSelection={rowSelection}

onRow={(v)=>{
              return { onClick: () => {

                  const arr= this.state.select;
                   arr.push(v.key);

                  this.setState({select:arr})


                  },       // 点击行

          onMouseEnter: () => {},  // 鼠标移入行
                   }
           }}

/>

 

如果需要内部 滚动的话 ;分为以下两种情况

y轴: 设置属性 

scroll={{y:1200}}

并且columns每一项 都有width属性 才能对其 

x轴   

scroll={{x:1200}}  x的值是所有columns的width的属性值 ;但是这样导致的是全局滚动 

如果某一项column不想不想滚动 

在其属性上添加fixed属性 : 固定到“left” 还是“right‘  看你需要 

排序  :

这个功能需要在 3个位置改动 

// 1.table
onChange={(a,b,c)=>this.handleSort.bind(this,c.order)} 
//拿到c 就是order 排序的值 去给state同步; 注意这边的 change事件需要手动调用;


//2 , column

  sorter:(a,b)=>{
              return a.age-b.age;
                               },

      sortOrder:this.state.sortOrder,

这边就是 和js的排序一样  ,同时吧state的值绑定 


// 3 设置state
 handleSort(c){
       this.setState({sortOrder:c})


    }

 

要实现antd表格高度自适应,有几种方法可以尝试。首先,通过修改组件中的width属性为minWidth属性来解决表格不自适应宽度的问题。具体做法是在columns数组中的每个对象中将width属性改为minWidth属性,例如:{ title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }。这样就可以确保表格的宽度不会溢出容器。 其次,如果想要让分页部分的底边自适应屏幕高度,可以使用CSS选择器::v-deep和calc()函数来设置表格的高度。例如,使用以下CSS代码可以实现分页部分底边自适应屏幕高度的效果:.ant-table { height: calc(100vh - 170px); }。这样就可以确保表格的高度在不同屏幕大小下自适应。 另外,如果需要实现表格内容区域可以滚动的效果,可以使用以下CSS代码来设置表格的高度和滚动属性:.ant-table-scroll { height: calc(100vh - 170px); overflow: auto scroll; }。这样就可以在表格内容超出容器高度时显示滚动条。 此外,还可以通过监听窗口大小变化来动态修改表格的高度。可以在mounted钩子函数中添加window.onresize事件监听窗口大小的变化,并使用document.body.clientHeight来获取窗口的高度。然后根据这个值来修改表格的高度。具体做法可以参考以下代码: ```typescript // 在组件内部 public clientHeight = 0; // 监听视窗大小变化 mounted() { const that = this; window.onresize = () => { return (() => { that.clientHeight = document.body.clientHeight; // 可在这里进行修改操作 // ... })(); }; } // Watch监听clientHeight属性,并在回调函数内部进行修改操作 @Watch('clientHeight') private getHeight() { // 修改操作 // ... } ``` 通过上述方法,可以实现antd表格的高度自适应。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值