只上干货,其中有些可以参考官方文档
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出去下拉框
];