antd table使用总结

## 勾选

```
import React,{ Component } from 'react';
import { Table,Icon,Divider } from 'antd';
let data = [{
    key: 1,
    name: '花骨朵',
    age: 18,
    hobby: '看书',
},{
    key: 2,
    name: '天下',
    age: 22,
    hobby: '诗歌',
},{
    key: 3,
    name: '晓晓',
    age: 16,
    hobby: '旅游',
},{
    key: 4,
    name: 'Disabled User',
    age: 19,
    hobby: '禁止',
}]
 
let columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
},{
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
},{
    title: '爱好',
    dataIndex: 'hobby',
    key: 'hobby',
}]
//这里的rowSelection即使为空也要定义，如果不写的话，会报这样的错误，'rowSelection' is not defined  no-undef'
const rowSelection = {
    //注意这里的单选框radio需要加上引号。
    //type: 'radio',
    //去掉全选和反选两个默认选项，暂时不起作用，不知道为什么
    //现在可以了，因为给true没加引号的缘故(注意: 如果还是不能使用的话, 使用了type: 'radio'的话, 不用定义这个)。
    hideDefaultSelections: 'true',
    //选择框的默认属性配置
    getCheckboxProps: record =>({
        //禁止掉的就是Disabled User这一项，也就是不能点
        disabled : record.name === 'Disabled User',
    }),
 
    //在这个里面我们将会得到什么信息呢？
    onChange: (selectedRowKeys,selectedRows)=>{
        //console.log('selectedRowKeys',selectedRowKeys); //得到每一项下标的信息[1],是一个数组，选一项数组中就有一项，选多项就有多项。
        //如果选中一项就是[{}],选中多项就是[{},{},{}]
        //console.log('selectedRows',selectedRows);//得到每一项的信息，也就是每一项的信息[{key: 1, name: "花骨朵", age: 18, hobby: "看书"}]
 
    },
    //onSelect 用户手动选择／取消选择 某列的回调。
    onSelect: (record, selected, selectedRows)=>{
        //console.log('record',record); //选中的每行，是一个对象
        //console.log('seleted',selected); //true或者false
        //console.log('selectedRows',selectedRows); //选中的每行信息，是一个数组
    },
    onSelectAll: (selected, selectedRows, changeRows)=>{
        // console.log('是否全选');
        // console.log('selected',selected); //是否选中
        // console.log('selectedRows',selectedRows); //选中的每一项
        // console.log('changeRows',changeRows);   //变化的每一项
 
    },
    //用户手动选择反选的回调
    onSelectInvert: (selectedRows)=>{
        console.log('selectedRows',selectedRows);
    },
}
class MaySelect extends Component {
    constructor(props) {
        super(props);
        this.state = {
 
        }
    }
    render() {
 
        return (
        )
    }
}
export default MaySelect;！
```

# **解决个别列的数据太长**
```
render: t => {
    const subIndex = 30 // 字符长度达到多少换行
        if (t.length > subIndex) {
            let item = []
            for (let i = 0; i < t.length; i += subIndex) {
                item.push(<span>{t.substr(i, subIndex)}</span>)
                if (t.length - i >= 30) {
                    item.push(<br />)
                }
            }
            return item
        } else {
            return t || "---"
        }
    }
}
```

Leanote's Blog

Navigation

Recent Posts

Friend Links