（记录笔记6）——6.2 Table高级表格

最新推荐文章于 2023-01-06 18:06:44 发布
最新推荐文章于 2023-01-06 18:06:44 发布
阅读量3k 收藏 34
点赞数 6
分类专栏： S.AntD后台项目 文章标签： Antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35812380/article/details/86499620
版权

6.2 高级表格

表单注册

文章目录

一.头部固定

头部固定,内容 y轴 滚动

scroll:指定y轴滚动 (240px)

width:指定每列的宽度

     const columns = [
          {
            title: 'id',
            key: 'id',
            width: 80,
            dataIndex: 'id'
          },
     .....
     <Card title="头部固定">
         <Table
             bordered
             columns={columns}
             dataSource={this.state.dataSource}
             pagination={false}
     +       scroll={{y: 240}}
         />
     </Card>
     

//src/pages/table/highTable.js
import React from 'react';
import {Card, Table, Modal, Button, message} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils'

export default class HighTable extends React.Component {
  state = {}
  params = {
    page: 1
  }

  componentDidMount() {
    this.request();
  }

  request = () => {
    axios.ajax({
      url: '/table/list1',
      data: {
        params: {
          page: this.params.page
        },
        // //  增加下方代码,则不会Loading
        // isShowLoading:false
      }
    }).then((res) => {
      if (res.code == 0) {
        res.result.list.map((item, index) => {
          item.key = index
        });
        this.setState({//页面刷新,不保留选中字段
          dataSource: res.result.list,
        });
      }
    })
  };

  render() {
    const columns1 = [
      {
        title: 'id',
        key: 'id',
        width: 80,
        dataIndex: 'id'
      },
      {
        title: '用户名',
        key: 'userName',
        width: 80,
        dataIndex: 'userName'
      },
      {
        title: '性别',
        key: 'sex',
        width: 80,
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女'
        }
      },
      {
        title: '状态',
        width: 80,
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': '咸?一条',
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        key: 'interest',
        width: 80,
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': '?‍',
            '2': '?',
            '3': '⚽',
            '4': '?',
            '5': '?',
            '6': '?',
            '7': '?',
            '8': '?',
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        key: 'address',
        width: 120,
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        key: 'time',
        width: 120,
        dataIndex: 'time'
      }
    ];
    return (
      <div>
        <Card title="头部固定" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns1}
            dataSource={this.state.dataSource}
            pagination={false}
            scroll={{y: 240}}
          />
        </Card>
      </div>
    );
  }
}

二 左侧固定

左侧 y 轴固定,x轴滚动

此处scroll={{x: 1850}} 1850 = 略大于 width 宽度之和(通常是5-10px)

当cocolumns2中内容很多,会出现水平滚动条

  • fixed:'left':在这里固定了 ,第一/二 列在左侧

  • fixed:'right':固定后两列在右侧

  • fixed列是否固定，可选 true(等效于 left) 'left'``'right'boolean|stringfalse
  • ...
    const columns2 = [
      {
        title: 'id',
        key: 'id',
        width: 80,
      +  fixed: 'left',
        dataIndex: 'id'
      },
      {
        title: '用户名',
        key: 'userName',
      + fixed: 'left',
        width: 80,
        dataIndex: 'userName'
      },
      {
        title: '性别',
        key: 'sex',
        width: 80,
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女'
        }
      },
      {
        title: '状态',
        width: 80,
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': '咸?一条',
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        key: 'interest',
        width: 80,
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': '?‍',
            '2': '?',
            '3': '⚽',
            '4': '?',
            '5': '?',
            '6': '?',
            '7': '?',
            '8': '?',
          };
          return config[abc];
        }
      },

      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },

      {
        title: '地址',
        key: 'address',
        width: 120,
      + fixed:'right',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        key: 'time',
        width: 120,
      + fixed:'right',
        dataIndex: 'time'
      }
    ];
...

  • //src/pages/table/highTable.js
import React from 'react';
import {Card, Table, Modal, Button, message} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils'

export default class HighTable extends React.Component {
  state = {};
  params = {
    page: 1
  };

  componentDidMount() {
    this.request();
  }

  // 动态获取mock数据
  request = () => {
    axios.ajax({
      url: '/table/list1',
      data: {
        params: {
          page: this.params.page
        },
        // //  增加下方代码,则不会Loading
        // isShowLoading:false
      }
    }).then((res) => {
      if (res.code == 0) {
        res.result.list.map((item, index) => {
          item.key = index
        });
        this.setState({//页面刷新,不保留选中字段
          dataSource: res.result.list,
        });
      }
    })
  };

  render() {
    const columns2 = [
      {
        title: 'id',
        key: 'id',
        width: 80,
        fixed: 'left',
        dataIndex: 'id'
      },
      {
        title: '用户名',
        key: 'userName',
        fixed: 'left',
        width: 80,
        dataIndex: 'userName'
      },
      {
        title: '性别',
        key: 'sex',
        width: 80,
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女'
        }
      },
      {
        title: '状态',
        width: 80,
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': '咸?一条',
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        key: 'interest',
        width: 80,
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': '?‍',
            '2': '?',
            '3': '⚽',
            '4': '?',
            '5': '?',
            '6': '?',
            '7': '?',
            '8': '?',
          };
          return config[abc];
        }
      },

      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },

      {
        title: '地址',
        key: 'address',
        width: 120,
        fixed:'right',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        key: 'time',
        width: 120,
        fixed:'right',
        dataIndex: 'time'
      }
    ];
    return (
      <div>
        <Card title="左侧固定" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns2}
            dataSource={this.state.dataSource}
            pagination={false}
            scroll={{x: 1850}}
          />
        </Card>
      </div>
    );
  }
}

三 排序

实现年龄这一列的排序?

sort()?--------参考官网https://ant.design/components/table-cn/

  handleChange = (pagination, filters, sorter) => {
    console.log('sorter: ', sorter.order);
    this.setState({
      sortOrder: sorter.order,
    });
  }
  
  
   const columns3 = [
     ...
      {
        title: '年龄',
        key: 'age',
        dataIndex: 'age',
        sorter: (a, b) => a.age - b.age,
        sortOrder: this.state.sortOrder,
      },
	...
    ];
      
   return (
      <div>
        <Card title="表格排序" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns3}
            dataSource={this.state.dataSource}
            pagination={false}
            onChange={this.handleChange}
          />
        </Card>
      </div>
    );
  }
}   
 

//src/pages/table/highTable.js
import React from 'react';
import {Card, Table, Modal, Button, message} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils'

export default class HighTable extends React.Component {
  state = {};
  params = {
    page: 1
  };

  componentDidMount() {
    this.request();
  }

  // 动态获取mock数据
  request = () => {
    axios.ajax({
      url: '/table/high/list',
      data: {
        params: {
          page: this.params.page
        },
        // //  增加下方代码,则不会Loading
        // isShowLoading:false
      }
    }).then((res) => {
      if (res.code == 0) {
        res.result.list.map((item, index) => {
          item.key = index
        });
        this.setState({//页面刷新,不保留选中字段
          dataSource: res.result.list,
        });

      }
    })
  };

  handleChange = (pagination, filters, sorter) => {
    console.log('sorter: ', sorter.order);
    this.setState({
      sortOrder: sorter.order,
    });
  }

  render() {
    const columns3 = [
      {
        title: 'id',
        key: 'id',
        dataIndex: 'id'
      },
      {
        title: '用户名',
        key: 'userName',
        dataIndex: 'userName'
      },
      {
        title: '性别',
        key: 'sex',
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女'
        }
      },
      {
        title: '年龄',
        key: 'age',
        dataIndex: 'age',
        sorter: (a, b) => a.age - b.age,
        sortOrder: this.state.sortOrder,
      },
      {
        title: '状态',
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': '咸?一条',
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        key: 'interest',
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': '?‍',
            '2': '?',
            '3': '⚽',
            '4': '?',
            '5': '?',
            '6': '?',
            '7': '?',
            '8': '?',
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        key: 'birthday',
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        key: 'address',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        key: 'time',
        dataIndex: 'time'
      }
    ];
    return (
      <div>
        <Card title="表格排序" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns3}
            dataSource={this.state.dataSource}
            pagination={false}
            onChange={this.handleChange}
          />
        </Card>
      </div>
    );
  }
}

API

sorter排序函数，本地排序使用一个函数(参考 Array.sort的 compareFunction)，需要服务端排序可设为 trueFunction|boolean-
sortOrder排序的受控属性，外界可用此控制列的排序，可设置为 'ascend' 'descend' falseboolean|string-
onChange分页、排序、筛选变化时触发Function(pagination, filters, sorter, extra: { currentDataSource: [] })

四 操作按钮

在表格中添加(Badge)徽标

status_badge

状态点

用于表示状态的小圆点

status:状态点的颜色

text:徽标的文本

<Badge status="success" text="Success" />

增加删除按钮?

  • 替换表格字段(*使用 render返回 a 标签)

  •  //删除操作
 handleDelete = (item) => {
     let id = item.id;
     Modal.confirm({
         title: "确认",
         content: '您确认要删除第'+id+'条数据吗',
         onOk: () => {
             message.success('删除成功');
             this.request();
         }
     })
 }
render(){
    const columns4 = [
...
	{
        title: '操作',
        width: 120,
        render: (text, item) => {//text 文本,item 这一行数据
          return <Button size="small" onClick={() => {
            this.handleDelete(item)
          }}>删除</Button>
        }
    }
	];
    
    return(
    <Card title="表格操作" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns4}
            dataSource={this.state.dataSource}
            pagination={false}
          />
    </Card>
)
}

    //src/pages/table/highTable.js
import React from 'react';
import {Card, Table, Modal, Button, message, Badge} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils'

export default class HighTable extends React.Component {
  state = {};
  params = {
    page: 1
  };

  componentDidMount() {
    this.request();
  }

  // 动态获取mock数据
  request = () => {
    axios.ajax({
      url: '/table/high/list',
      data: {
        params: {
          page: this.params.page
        },
        // //  增加下方代码,则不会Loading
        // isShowLoading:false
      }
    }).then((res) => {
      if (res.code == 0) {
        res.result.list.map((item, index) => {
          item.key = index
        });
        this.setState({//页面刷新,不保留选中字段
          dataSource: res.result.list,
        });

      }
    })
  };
  //删除操作
  handleDelete = (item) => {
    let id = item.id;
    Modal.confirm({
      title: "确认",
      content: '您确认要删除第'+id+'条数据吗',
      onOk: () => {
        message.success('删除成功');
        this.request();
      }
    })
  }

  render() {
    const columns4 = [
      {
        title: 'id',
        width: 80,
        dataIndex: 'id'
      },
      {
        title: '用户名',
        width: 80,
        dataIndex: 'userName'
      },
      {
        title: '性别',
        width: 80,
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女'
        }
      },
      {
        title: '状态',
        width: 80,
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': "咸?一条",
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        width: 80,
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': <Badge status="success" text='?‍'/>,
            '2': <Badge status="error" text='?'/>,
            '3': <Badge status="default" text='⚽'/>,
            '4': <Badge status="warning" text='?'/>,
            '5': <Badge status="processing" text='?'/>,
            '6': <Badge status="success" text='?'/>,
            '7': <Badge status="error" text='?'/>,
            '8': <Badge status="default" text='?'/>,
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        width: 120,
        dataIndex: 'address'
      },
      {
        title: '操作',
        width: 120,
        render: (text, item) => {
          return <Button size="small" onClick={() => {
            this.handleDelete(item)
          }}>删除</Button>
        }
      }
    ];
    return (
      <div>
        <Card title="表格操作" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns4}
            dataSource={this.state.dataSource}
            pagination={false}
          />
        </Card>
      </div>
    );
  }
}

完整案例

//src/pages/table/highTable.js
import React from 'react';
import {Card, Table, Modal, Button, message, Badge} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils'

export default class HighTable extends React.Component {
  state = {};
  params = {
    page: 1
  };

  componentDidMount() {
    this.request();
  }

  // 动态获取mock数据
  request = () => {
    axios.ajax({
      url: '/table/high/list',
      data: {
        params: {
          page: this.params.page
        },
        // //  增加下方代码,则不会Loading
        // isShowLoading:false
      }
    }).then((res) => {
      if (res.code == 0) {
        res.result.list.map((item, index) => {
          item.key = index
        });
        this.setState({//页面刷新,不保留选中字段
          dataSource: res.result.list,
        });

      }
    })
  };

  handleChange = (pagination, filters, sorter) => {
    console.log('sorter: ', sorter.order);
    this.setState({
      sortOrder: sorter.order,
    });
  }

  //删除操作
  handleDelete = (item) => {
    let id = item.id;
    Modal.confirm({
      title: "确认",
      content: '您确认要删除第'+id+'条数据吗',
      onOk: () => {
        message.success('删除成功');
        this.request();
      }
    })
  }

  render() {
    const columns1 = [
      {
        title: 'id',
        key: 'id',
        width: 80,
        dataIndex: 'id'
      },
      {
        title: '用户名',
        key: 'userName',
        width: 80,
        dataIndex: 'userName'
      },
      {
        title: '性别',
        key: 'sex',
        width: 80,
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女'
        }
      },
      {
        title: '状态',
        width: 80,
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': '咸?一条',
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        key: 'interest',
        width: 80,
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': '?‍',
            '2': '?',
            '3': '⚽',
            '4': '?',
            '5': '?',
            '6': '?',
            '7': '?',
            '8': '?',
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        key: 'address',
        width: 120,
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        key: 'time',
        width: 120,
        dataIndex: 'time'
      }
    ];

    const columns2 = [
      {
        title: 'id',
        key: 'id',
        width: 80,
        fixed: 'left',
        dataIndex: 'id'
      },
      {
        title: '用户名',
        key: 'userName',
        fixed: 'left',
        width: 80,
        dataIndex: 'userName'
      },
      {
        title: '性别',
        key: 'sex',
        width: 80,
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女'
        }
      },
      {
        title: '状态',
        width: 80,
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': '咸?一条',
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        key: 'interest',
        width: 80,
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': '?‍',
            '2': '?',
            '3': '⚽',
            '4': '?',
            '5': '?',
            '6': '?',
            '7': '?',
            '8': '?',
          };
          return config[abc];
        }
      },

      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },

      {
        title: '地址',
        key: 'address',
        width: 120,
        fixed: 'right',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        key: 'time',
        width: 120,
        fixed: 'right',
        dataIndex: 'time'
      }
    ];

    const columns3 = [
      {
        title: 'id',
        key: 'id',
        dataIndex: 'id'
      },
      {
        title: '用户名',
        key: 'userName',
        dataIndex: 'userName'
      },
      {
        title: '性别',
        key: 'sex',
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女'
        }
      },
      {
        title: '年龄',
        key: 'age',
        dataIndex: 'age',
        sorter: (a, b) => a.age - b.age,
        sortOrder: this.state.sortOrder,
      },
      {
        title: '状态',
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': '咸?一条',
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        key: 'interest',
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': '?‍',
            '2': '?',
            '3': '⚽',
            '4': '?',
            '5': '?',
            '6': '?',
            '7': '?',
            '8': '?',
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        key: 'birthday',
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        key: 'address',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        key: 'time',
        dataIndex: 'time'
      }
    ];

    const columns4 = [
      {
        title: 'id',
        width: 80,
        dataIndex: 'id'
      },
      {
        title: '用户名',
        width: 80,
        dataIndex: 'userName'
      },
      {
        title: '性别',
        width: 80,
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女'
        }
      },
      {
        title: '状态',
        width: 80,
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': "咸?一条",
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者',
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        width: 80,
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': <Badge status="success" text='?‍'/>,
            '2': <Badge status="error" text='?'/>,
            '3': <Badge status="default" text='⚽'/>,
            '4': <Badge status="warning" text='?'/>,
            '5': <Badge status="processing" text='?'/>,
            '6': <Badge status="success" text='?'/>,
            '7': <Badge status="error" text='?'/>,
            '8': <Badge status="default" text='?'/>,
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        width: 120,
        dataIndex: 'address'
      },
      {
        title: '操作',
        width: 120,
        render: (text, item) => {
          return <Button size="small" onClick={() => {
            this.handleDelete(item)
          }}>删除</Button>
        }
      }
    ];
    return (
      <div>
        <Card title="头部固定" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns1}
            dataSource={this.state.dataSource}
            pagination={false}
            scroll={{y: 240}}
          />
        </Card>
        <Card title="左侧固定" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns2}
            dataSource={this.state.dataSource}
            pagination={false}
            scroll={{x: 1850}}
          />
        </Card>

        <Card title="表格排序" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns3}
            dataSource={this.state.dataSource}
            pagination={false}
            onChange={this.handleChange}
          />
        </Card>

        <Card title="表格操作" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns4}
            dataSource={this.state.dataSource}
            pagination={false}
          />
        </Card>
      </div>
    );
  }
}

API

参数说明类型默认值
action上传的地址string|(file) => Promise无
showUploadList是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIconBoolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }true
onChange上传文件改变时的状态，详见 onChangeFunction无
listType上传列表的内建样式，支持三种基本样式 text, picture 和 picture-cardstring‘text’
小李科技
关注
  • 6
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
ant design vue中表格指定格式渲染
Femi的博客欢迎大家
05-16 3万+
注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1： 指定渲染函数： const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }...
Ant Design - Table Columns中dataIndex的含义
weixin_45312721的博客
12-08 1826
Ant Design - Table Columns中dataIndex的含义
Vue中使用andt组件a-table列表数据根据点击的表头进行升/降排序-案例
JackieDYH的博客
07-04 2962
1.每次点击时都能拿到当前的点击对象（比如列子中Age），可以通过sorter参数里面的columnKey拿到。 2.每次点击时可以区分是升序、降序、还是既不升序也不降序， sorter参数中order值为"ascend"时为升序； sorter参数中order值为"descend"时为降序； sorter参数中没有order键时为既不升序也不降序。 所以我们就可以在change绑定的事件中，根据排序的类型（点击的哪一列）、升序还是降序来向服务器发送请求拿到数据。 所以在确认当前点击的是哪一列时应该取
vue+element国际化 封装表格中表头内容多语言切换
weixin_46642414的博客
04-09 1273
将tableColumns列的定义写在computed内 computed:{ tableColumns(){ const tableColumns=[ {type: "index" }, {align: "center",label:this.$t('releaseTime0297'),width: 150}, {align: "left",label:this.$t('headline005'),minWidth..
columns网页布局
胡图图图
01-29 1580
网页布局是指在网页中如何对标题、导航栏、主要内容、表单等各种构成要素进行一个合理的编排。 在css3前主要使用float和position属性进行页面布局，但是使用这些属性也存在着一些缺点。比如多栏中如果元素的内容高度不一致则底部很难对齐，会存在空白。 在css3中增加了一些新的布局方式。使用新的布局方式，可以更加快捷方便的来编排更为复杂的页面。css3中的Mulitiple Columns多
dubbo笔记——项目实战
02-24
存在2个系统，A系统和B系统，A系统调用B系统的接口获取数据，用于查询用户列表。安装zookeeper，解压（zookeeper-3.4.8.tar.gz）得到如下：然后进入conf将zoo_sample.cfg改名成zoo.cfg。并相关如下内容：该目录为...
论文笔记模板——自用xmind模板
03-08
本资源提供了一份“论文笔记模板——自用xmind模板”，旨在帮助用户以更有序的方式整理和记录论文阅读心得。 Xmind是一款强大的思维导图软件，它以其直观的界面和丰富的功能深受用户喜爱，尤其适用于整理复杂信息和...
RRT学习笔记——记录
04-12
RRT学习笔记——记录
Android学习笔记之——Content Providers
01-03
之前博文《 Android学习笔记之——Android Studio的安装（3.6版本）、Java的基本语法及Android的概述 》曾经介绍过android有四大组件。本博文学习一下Content Providers（内容提供器） 目录 Android运行时 ...
React 表格列colums中条件判断渲染显示
So丶easy的博客
03-27 5250
React 表格列colums中条件判断渲染显示 colums中的render方法中条件判断 const columns = [ { field: 'ip', name: 'Controller IP', render: (ip,row,index) => {//ip：当前列的值，row：当前行所有值对象，index：当前位置 let sdnS...
前端复杂表格一键导出看这篇就够了（附源码）
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
05-30 1409
前端导出 excel 的需求很多，但市面上好用的库并不多，讲明白复杂使用场景的文章更少。本文将以文字 + demo 源码的形式，力求讲清楚满足 99% 使用场景的终极 excel 导出方案。如果项目中用到了 AntD，那就更简单了，因为 Table 本身已经设置好了 column 和 dataSource，只需解析 column 和 dataSource 即可快速导出 E...
记录一次react + typescript + antd 中table配置项 columns居中问题
qq_42359718的博客
04-12 3088
在项目中直接写 const columns = [ { title: '供应商ID', dataIndex: 'name', key: 'name', align: 'center' }, typscript会检测报错 处理方式： 一： const columns = [ { title: '供应商ID', dataIndex: 'name', key: 'name', align:'center' as 'center',
array_columns的用法
hjh15827475896的博客
12-19 1099
php array_columns 函数是php5.5以后才加入的 共有三个参数 第一个参数是做用的数组    第二个参数是要取得的二维数组中的键名（如果为Null,则表示所有的）  第三个参数表示新数组的键的取值 直接上代码 $testArr = [ [ "id"=&gt;1, "name"=&gt;"huang", "age"=&...
Ant Design Pro --------------- ProTable高级表格细节用法（持续更新中...）
热门推荐
qq_48718857的博客
01-07 1万+
热门用法参考官方文档：https://procomponents.ant.design/components/table 一、菜单栏 有些时候菜单栏不需要那么多，而不对菜单栏进行设置就会默认全部显示。所以需要删除一些。 默认全为true,如果不要就设置为false即可。 例如不要刷新： <ProTable options={{ reload: false }} /> 例如全不要： <ProTable options={false .
使用react实现后台管理系统项目
m0_71933813的博客
12-30 8906
一.开发React必须依赖三个库 1.react：包含react所必须的核心代码 2.react-dom：react渲染在不同平台所需要的核心代码 3.babel：将jsx转换成React代码的工具 二.React的依赖引入 1.方式一：直接CDN引入 2.方式二：下载后，添加本地依赖 1).在html中引入 a.react.js b.react-dom.js c.b
react后台管理项目实战
m0_53603549的博客
01-06 962
尚硅谷的react项目实战
Ant Design Pro of Vue2 文件上传组件 Upload 自定义上传实战笔记
将PHP Web开发进行到底
10-07 2972
在使用 Ant Design Pro of Vue2 框架进行项目开发过程中，不可避免的遇到文件上传类的功能需求，本文就实战过程中遇到的一些经验和问题做个分享，为自己做个笔记，也为需要帮助的同学做个参考！
sparksql代码笔记03——连接hive
最新发布
06-28
好的，下面是SparkSQL代码笔记03——连接Hive的中文回复： 在SparkSQL中，我们可以通过以下步骤连接Hive： 1. 首先，需要在SparkSession中启用Hive支持，可以使用以下代码： ``` from pyspark.sql import ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值