import React, { useState, useEffect } from ''react''
import { Row, Col, Button, Form, message } from ''antd''
import { EditableProTable } from ''@ant-design/pro-table''
const EditZTTable: React.FC = () => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([])
  const [dataSource, setDataSource] = useState<projectRiskProps[]>([])
  const [editForm] = Form.useForm()
  // 提交方法
  const onSave = async () => {
    await editForm.validateFields() // 调用表单验证
  }
  return (
    <>
      <EditableProTable
        columns={columns}
        rowKey="id"
        value={dataSource}
        recordCreatorProps={{
          newRecordType: ''dataSource'',
          record: () => ({
            id: Date.now(),
          }),
        }}
        editable={{
          type: ''multiple'',
          form: editForm,
          editableKeys,
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete]
          },
          onValuesChange: (record, recordList) => {
            setDataSource(recordList)
          },
          onChange: (editableKeyss, editableRows: projectRiskProps[]) => {
            setEditableRowKeys(editableKeyss)
            setDataSource(editableRows)
          },
        }}
      />
      <Row>
        <Col span={24} style={{ textAlign: ''right'' }}>
          <Button style={{ margin: ''15px 8px 0'' }} onClick={onCancel}>取消</Button>
          <Button type="primary" onClick={onSave}>保存</Button>
        </Col>
      </Row>
    </>
  )
}

• Ant Design 组件库之步骤条实现
• Ant Design Vue 走马灯实现单页多张图片轮播效果
• 如何使用ant-design-vue的Table组件
• Ant Design of Vue select框获取key和name的问题
• 关于Ant-Design-Vue快速上手指南+排坑
• ant design vue的form表单取值方法
• Ant Design 组件库按钮实现示例详解

https://bootstrap-table.com
http://github.com/vitalets/x-editable
 
    $("#table").bootstrapTable({
            url: "",
            editable: true,
            columns: [
                {
                    title: that.columns[''Operate''],
                    field: ''_'',
                    align: ''center'',
                }, {
                    title: that.columns[''x1''],
                    field: ''x1'',
                    align: ''center'',
                    editable: {
                        canEdit: true,
                        type: ''number'',
                        validate: function (v) {
                            if (v.length > 9) {
                                return "数字超出范围";
                            }
                        }
                    },
                    cellStyle: function (value, row, index) {
                        if (value == undefined || value == "" || isNaN(value)) {
                            return { css: { "background-color": "yellow" } }
                        }
                        else {
                            return { css: { "background-color": "white" } }
                        }
                    },
                    formatter: function (value, row, index) {
                        if (value == null || value == ''NaN'') {
                            return "";
                        } else {
                            return value;
                        }
                    }
                }]

这里要注意一点

canEdit: true  是修改原代码增加的属性，因为原代码判断 editable 属性存在就认为可编辑，与需求有一定出入。因此在原代码

$.each(this.columns, function(i, column) {
if (!column.editable) {
return;
}

if (!column.editable.canEdit) {
return;
} 增加如下代码  

table.options.editable 属性标识整行是否可以编辑，如果要实现列编辑动态锁定，更改canEdit属性即可实现。但该方法要刷新页面重载后才能有效。