利用ant-design 怎么在可编辑表格的单元格里加上select控件

Question

利用ant-design 怎么在可编辑表格的单元格里加上select控件，并更新表格state值

Answer 1

看例子getInput这个方法改一下加一个判断,通过inputType返回对应的组件

  getInput = () => {
    if (this.props.inputType === 'number') {
      return <InputNumber />;
    }else if (this.props.inputType === 'select') {
      return <Select />;
    }
    return <Input />;
  };

Answer 2

Answer 3

您好，请教一下，getInput = () => {

if (this.props.inputType === 'number') {
  return <InputNumber />;
}else if (this.props.inputType === 'select') {
  return <Select />;
}
return <Input />;

};
这个代码是在哪个文件里

Answer 4

基于antd写了一个可编辑表格的组件，支持单行编辑、全表编辑、新增、单元格表单项联动等功能，可以看一下对你是否有帮助可编辑表格demo页

上手简单，简单配置（代码如下）就可实现如图功能
`import React from 'react';
import { Editable } from 'am-editable';
import { Input, Button, InputNumber } from 'antd';

const fields = [
{

title: '姓名',
id: 'name',
width: '30%',
editable: true,

},
{

title: '简介',
id: 'info',
children: [
  {
    title: '年龄',
    id: 'age',
    editable: true,
    renderFormInput: () => {
      return <InputNumber />;
    }
  },
  {
    title: '身高',
    id: 'height',
    editable: true,
  }
]

},
{

title: '地址',
id: 'address',
editable: true,
renderFormInput: () => {
  return <Input />
},
trigger: 'onBlur',

}
]

export default () => {
return <div>

<Editable
  defaultData={{age: 90}}
  fields={fields}
  multiple={false}
  max={3}
  defaultValue={
    [
      {name: '小明', age: 18, height: 175, address: '杭州'}
    ]
  }
  // optionExtraBefore = {<Button size="small">预览</Button>}
  onChange={val => {
    console.log(val);
  }} />

</div>;
};`