react+antd的Table组件编辑单元格

最新推荐文章于 2025-10-19 14:43:03 发布

原创

最新推荐文章于 2025-10-19 14:43:03 发布 · 1.4k 阅读

需求：新增加一行，且单元格可以编辑

场景：真实的业务需求（antd 3 版本+react）

效果图：1. 默认增加一行时，第一列是下拉选择框，第2 3列是TextArea，图1

2. 当下拉选择的数据不同，展示出的第4567列也不同

3. 有直接调接口默认回显数据、有Input输入框形式（当增加一行新的，默认显示图片2的效果。当选择了“纸质普票”，这一行就变成图3 的效果。当选择“纸质普票”以外的选项，又会变成图2 的形式。“纸质普票”比较特殊）。

4. 编辑好当前行，不保存无法再新增一行

代码仅供参考，里面涉及的业务逻辑可以忽略，可以看主要内容

图1：

图2：

图3：

图4：

图5：

完整代码：

// 父级
import EditableFormTable from './EditableFormTable' // 子级

class Editable extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      IsFPLX: '', // 发票类型
      value: [], // 
      disabled: false, // 控制表格的是否可以新增一行
      zyfp: [
        {key:'纸质普票', label:'纸质普票'},
        {key:'纸质专票', label:'纸质专票'},
        {key:'电子专用发票', label:'电子专用发票'},
        {key:'数电专票', label:'数电专票'}  
       ]
    
  
  render() {
    const { value, IsFPLX, disabled, zyfp } = this.state;
    const propsObj = {
      IsFPLX,
      value,
      onChange: (value) => {
        const values = value   
        this.props.onChange([...value]) // 这块是我这表单平台专有的方法，你那可能不适用。这里做更显数据的
      }
      disabled,
      zyfp,
      
    };
    return (
      <div>
        <EditableFormTable {...propsObj} />     
      </div>
    );
  }
}

export default Editable

import { Table, Input, Button, Popconfirm, Form,  } from 'antd';
const EditableContext = React.createContext();

const { TextArea } = Input
const Option = Select.Option

// 子级中的单个单元格
class EditableCell extends React.Component {
    constructor(props) {
    super(props);
    this.state={
     };
  
    //
    handleChange = (e, form) => {
        const { value, record } = this.props;
        if(e === '纸质普票'){
            this.props.changeSelectFlag(3) // 发票代码字段不用非要输入
        } else if (e === '数电专票'){
            this.props.changeSelectFlag(1) // 发票代码字段置灰，不可输入
        } else {
            this.props.changeSelectFlag(0) // 发票代码字段是否输入不作校验
        }
    }
    
    //
    getInput = (form, record) => {
        const type = this.props.inputType()
        const flag = this.props.IsFPLX
        const optionList = this.props.zyfp
        const selectView = optionList && optionList[0] && optionList.map(item => { return (<Option value={item.key}>{item.label}</Option>)})
        let view = null
        if(record.fplx !== '纸质普票'){
            switch(type){
                case 'select':
                    view=(<Select style={
   
   { width: '100%'}} onSelect={this.handleChange(e, form)}>{selectView}</Select>)
                    break;
                case 'TextArea1'

标签