react antd design columns 配置解析

只上干货，其中有些可以参考官方文档

import { history } from 'umi' 
const columns: any[] = [
    {
      title: '订单号',//列头显示的文字
      fixed: 'left', //整列固定在左侧（right等参数 其中fixed：true ==fixed:left）
      width: 200,//列头的宽度
      order: 7,//列头的排序
      key:"id",//搜索时候重定义搜索参数（将order_no代替成id，不写则默认搜索参数为order_no）
      dataIndex: 'order_no',//数据对应的字段
      render: (text: any, record: any,index) => (
        <a onClick={() => history.push(`url?id=${record.id}`)}>
          {record.order_no}
        </a>
      ),
        //render:参数有三，text：本项内容的value，record：object当前这一行的内容 index：当前行索引
    }, 
   
    {
      title: '时间',
      hideInTable: true,//在 Table 中不展示此列
      hideInSearch：true,//在查询表单中不展示此项
      hideInForm:true,	//在 Form 中不展示此列
      width: 200,
      dataIndex: 'create_at',
      valueType: 'dateRange',//时间采用区间

    },
    {
      title: '商品',
      width: 200,
      dataIndex: 'goods_name',
      search:false,//不参与搜索栏的搜索
      copyable: true,//是否允许复制
      ellipsis: true,//超出省略号展示
      tip: '标题过长会自动收缩',
      formItemProps: {//自定义规则条件
          rules: [
             {
                required: true,//必填
                message: '此项为必填项',
             },
           ],
       },
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      valueType: 'second',
      renderFormItem() {
        return <InputNumber controls={false} />  //搜索框中手机号只能收入数字，其他的字符过滤
       },
    },
    /**************以下包含几种处理下拉框的办法*********************/
    {
        title: '状态',
        dataIndex: 'state',
        filters: true,
        onFilter: true,
        valueType: 'select',
        formItemProps: {
          rules: [
            {
              required: true,
              message: '此项为必填项',
            },
          ],
        },
        valueEnum: {
              all: { text: '全部', status: 'Default' },
              open: {
                text: '未解决',
                status: 'Error',
              },
              closed: {
                text: '已解决',
                status: 'Success',
                disabled: true,
              },
              processing: {
                text: '解决中',
                status: 'Processing',
              },
         },
    },
    {
      title: '等级',
      dataIndex: 'level',
      valueType: 'select',
      fieldProps: {
        options: state.search?.dealer_level_id,
        placeholder: state.search.dealer_level_id && state.search.dealer_level_id[0].label,
      },
      render: (_: any, record: any) => {
        return <div>{record.dealer_level_name}</div>
      },
    },
    {
      title: '来源平台',
      width: 200,
      valueType: 'select',//搜索类型为下拉框
      dataIndex: 'app',
      request: async () =>
        app.map(({ name, value }: any) => {
          return { label: name, value: value }
        }),
       //采用异步请求，获取下拉框的数据，数据格式是{label:name,value:value}
    },
    {
      title: '店铺名称',
      width: 200,
      valueType: 'select',//搜索列表采用下拉框
      dataIndex: 'shop',
      renderFormItem: (item: any, { type }: any, form: any) => {
            if (type === 'form') {
                  return null
            }
            let shoparr: any = []
            const sourceValue = form.getFieldValue('app')
            if (sourceValue) {
                  let shop_arr1 = []
                  for (let v in shop) {
                  if (sourceValue == v) {
                      shop_arr1 = shop[v]
                  }
            }
            if (shop_arr1.length > 0) {
                shoparr = shop_arr1.map((item: any) => {
                  return { label: item.shop_name, value: item.shop_id }
                })
            }
        }
        return <Select options={shoparr} allowClear />
      },

    //自定义搜索框，采用来源平台选中的值，作为店铺的父级id，同时，处理完返回一个arr的数据，return出去下拉框
];