求助：ant-design的table新增可以，编辑报错getFieldDecorator is not a function

Question

求解呀，这到底什么情况，安装antd@2也不管用。下面有这个页面全部代码，有用一个table插件: https://xuliangzhan_admin.git...
编辑样式也没有渲染出来，

这是新增，当点过编辑报错以后我的新增再点击也会变成上面一样空的了。

js代码：

html

编辑

新增

data：

<template>

 <div class="realData">

 <!-- <a-form

 :form="form"

 :label-col="{ span: 5 }"

 :wrapper-col="{ span: 12 }"

 @submit="handleSubmit"

 >

 <a-form-item label="Note">

 <a-input

 v-decorator="[

 'note',

 { rules: [{ required: true, message: 'Please input your note!' }] },

 ]"

 />

 </a-form-item>

 <a-form-item label="Gender">

 <a-select

 v-decorator="[

 'gender',

 {

 rules: [

 { required: true, message: 'Please select your gender!' },

 ],

 },

 ]"

 placeholder="Select a option and change input text above"

 @change="handleSelectChange"

 >

 <a-select-option value="male">

 male

 </a-select-option>

 <a-select-option value="female">

 female

 </a-select-option>

 </a-select>

 </a-form-item>

 <a-form-item :wrapper-col="{ span: 12, offset: 5 }">

 <a-button type="primary" html-type="submit">

 Submit

 </a-button>

 </a-form-item>

 <a-checkbox-group

 v-model="value"

 name="checkboxgroup"

 :options="plainOptions"

 @change="onChange"

 />

 <br />

 <a-checkbox-group

 :options="plainOptions"

 :default-value="['Apple']"

 @change="onChange"

 />

 <br />

 <a-checkbox-group

 :options="options"

 :value="['Pear']"

 @change="onChange"

 />

 <br />

 <a-checkbox-group

 :options="optionsWithDisabled"

 disabled

 :default-value="['Apple']"

 @change="onChange"

 >

 <span slot="label" slot-scope="{ value }" >{{

 value

 }}</span>

 </a-checkbox-group>

 </a-form> -->

 <vxe-toolbar export print custom>

 <template v-slot:buttons>

 <a-button @click="insertEvent">新增</a-button>

 <a-button @click="saveEvent">保存</a-button>

 <a-button @click="vaildEvent">校验</a-button>

 <a-dropdown :trigger="['click']">

 <a-button>操作<a-icon type="down"/></a-button>

 <a-menu slot="overlay">

 <a-menu-item key="0">

 <a @click="dropdownMenuEvent('remove')">删除选中</a>

 </a-menu-item>

 <a-menu-item key="1">

 <a @click="dropdownMenuEvent('export')">导出数据</a>

 </a-menu-item>

 <a-menu-divider />

 </a-menu>

 </a-dropdown>

 </template>

 </vxe-toolbar>

 <vxe-table

 border

 resizable

 row-key

 keep-source

 export-config

 highlight-hover-row

 ref="xTable"

 width="100%"

 height="528"

 :loading="loading"

 :data="dataSource">

 <vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>

 <vxe-table-column type="seq" title="排序" width="80" fixed="left"></vxe-table-column>

 <vxe-table-column field="name" title="种类"></vxe-table-column>

 <vxe-table-column field="number" title="数量"></vxe-table-column>

 <vxe-table-column field="qualification" title="合格数"></vxe-table-column>

 <vxe-table-column field="qualified" title="数据质量合格率"></vxe-table-column>

 <vxe-table-column field="statisTime" title="统计时间"></vxe-table-column>

 <vxe-table-column title="操作" fixed="right" width="120" show-overflow>

 <template v-slot="{ row }">

 <a @click="editEvent(row)">编辑</a>

 &nbsp;<a @click="removeEvent(row)">删除</a>

 </template>

 </vxe-table-column>

 </vxe-table>

 <vxe-modal v-model="showEdit" :title="selectRow ? '编辑' : '新增'" width="800" min-width="600" min-height="300" :loading="submitLoading" resize destroy-on-close>

 <template v-slot>

 <a-form class="edit-form" :form="form" @submit="submitTable">

 <a-row>

 <a-col :span="12">

 <a-form-model-item label="名称">

 <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入名称！' }] }]" placeholder="请输入名称" />

 </a-form-model-item>

 <a-form-model-item label="数量">

 <a-input-number v-decorator="['number', { rules: [{ required: true, message: '请输入'}] }]" />

 </a-form-model-item>

 <a-form-model-item label="合格数">

 <a-input-number v-decorator="['qualification', { rules: [{ required: true, message: '请输入合格数'}] }]" />

 </a-form-model-item>

 </a-col>

 <a-col :span="12">

 <a-form-model-item label="数据质量合格率">

 <a-input v-decorator="['qualified', { rules: [{ required: true, pattern: /(^[1-9][0-9]$)|(^100&)|(^[1-9]$)$/, message: '请输入1-100以内的数字'}] }]" suffix="%" />

 </a-form-model-item>

 <a-form-item label="统计时间" has-feedback>

 <a-date-picker

 format="YYYY-MM-DD HH:mm:ss"

 :mode="mode1"

 v-decorator="['date-time-picker', config]"

 show-time

 @openChange="handleOpenChange1"

 @panelChange="handlePanelChange1"

 />

 </a-form-item>

 </a-col>

 </a-row>

 <a-form-item class="submit-btn-box">

 <a-button width="80" class="submit-btn" type="primary" html-type="submit">

 提交

 </a-button>

 <a class="reset" @click='reset'>重置</a>

 </a-form-item>

 </a-form>

 <!-- <vxe-form :data="formData" :items="formItems" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent"></vxe-form> -->

 </template>

 </vxe-modal>

 <a-pagination

 @showSizeChange="handleSizeChange"

 @change="handleCurrentChange"

 v-model="tablePage.currentPage"

 :page-size-options="['5', '10', '20', '50', '100']"

 :page-size="tablePage.pageSize"

 :total="tablePage.totalResult"

 showSizeChanger

 showQuickJumper

 >

 </a-pagination>

 <!-- <a-button type="primary" @click="showDrawer"> <a-icon type="plus" /> New account </a-button> -->

 </div>

</template>

<script>

import moment from 'moment';

const plainOptions = ["Apple", "Pear", "Orange"];

const options = [

 { label: "Apple", value: "Apple" },

 { label: "Pear", value: "Pear" },

 { label: "Orange", value: "Orange" },

];

const optionsWithDisabled = [

 { value: "Apple" },

 { label: "Pear", value: "Pear" },

 { label: "Orange", value: "Orange", disabled: false },

];

const dataSource = [

 {

 key: 1,

 name: "John Brown sr.",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 children: [

 //这里我把子节点的key，改为qq了

 {

 key: 11,

 name: "John Brown",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 ],

 },

 {

 key: 2,

 name: "Joe Black23",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 3,

 name: "Joe Black",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 4,

 name: "Joe Black234",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 5,

 name: "Joe Black",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 6,

 name: "Joe Black24222",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 7,

 name: "Joe Black",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 8,

 name: "Joe Black12412",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 9,

 name: "Joe Black",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 10,

 name: "Joe Black",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 11,

 name: "Joe Black12412",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 12,

 name: "Joe Black",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 13,

 name: "Joe Black",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 14,

 name: "Joe Black",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 15,

 name: "Joe Black",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

 {

 key: 16,

 name: "Joe Black",

 number: 12,

 qualification: 45,

 qualified: 48,

 statisTime: '2020-09-15 12:15:45',

 },

];

export default {

 data() {

 this.cacheData = dataSource.map((item) => ({ ...item })); //缓存所有数据

 return {

 plainOptions,

 options,

 optionsWithDisabled,

 value: [],

 dataSource,

 // 新增/编辑

 // form: {

 //   name: null,

 //   number: null,

 //   qualification: null,

 //   qualified: null,

 //   statisTime: null,

 // },

 form: this.$form.createForm(this, { name: 'coordinated' }),

 formLayout: 'horizontal',

 mode1: 'time',

 mode2: ['month', 'month'],

 value: [],

 config: {

 rules: [{ type: 'object', required: true, message: 'Please select time!' }],

 },

 selectRow: null,

 submitLoading: false,

 loading: false,

 showEdit: false,

 showStatus: false,

 tableData: [],

 validRules: {

 name: [

 { required: true, message: "app.body.valid.rName" },

 { min: 3, max: 50, message: "名称长度在 3 到 50 个字符" },

 ],

 sex: [{ required: true, message: "性别必须填写" }],

 },

 restaurants: ["前端", "后端", "开发", "测试"],

 ACProps: {

 dataSource: [],

 },

 sexList: [],

 regionList: [],

 sexGroupList: [

 {

 label: "分组1",

 options: [

 {

 label: "男",

 value: "1",

 },

 ],

 },

 {

 label: "分组2",

 options: [

 {

 label: "女",

 value: "0",

 },

 ],

 },

 ],

 tablePage: {

 currentPage: 1,

 pageSize: 10,

 totalResult: dataSource.length,

 },

 formData: {

 name: "",

 role: "",

 sex: null,

 age: null,

 region: [],

 date: null,

 flag: false,

 rate: 0,

 flag1: "",

 checkedList: [],

 },

 };

 },

 computed: {

 rowSelection() {

 const { selectedRowKeys } = this;

 return {

 selectedRowKeys,

 onChange: this.onSelectChange,

 hideDefaultSelections: true,

 selections: [

 {

 key: "all-data",

 text: "Select All Data",

 onSelect: () => {

 this.selectedRowKeys = [...Array(46).keys()]; // 0...45

 },

 },

 {

 key: "odd",

 text: "Select Odd Row",

 onSelect: (changableRowKeys) => {

 let newSelectedRowKeys = [];

 newSelectedRowKeys = changableRowKeys.filter((key, index) => {

 if (index % 2 !== 0) {

 return false;

 }

 return true;

 });

 this.selectedRowKeys = newSelectedRowKeys;

 },

 },

 {

 key: "even",

 text: "Select Even Row",

 onSelect: (changableRowKeys) => {

 let newSelectedRowKeys = [];

 newSelectedRowKeys = changableRowKeys.filter((key, index) => {

 if (index % 2 !== 0) {

 return true;

 }

 return false;

 });

 this.selectedRowKeys = newSelectedRowKeys;

 },

 },

 {

 key: "clear",

 text: "Select clear Row",

 onSelect: (changableRowKeys) => {

 let newSelectedRowKeys = [];

 newSelectedRowKeys = changableRowKeys.filter(() => {

 // if (index % 2 !== 0) {

 //   return true;

 // }

 return false;

 });

 this.selectedRowKeys = newSelectedRowKeys;

 },

 },

 ],

 onSelection: this.onSelection,

 };

 },

 hasSelected() {

 return this.selectedRowKeys.length > 0;

 },

 },

 beforeCreate() {

 // this.form = this.$form.createForm(this, { name: 'time_related_controls' });

 },

 created() {

 this.findList();

 this.findSexList();

 this.findRegionList();

 },

 methods: {

 moment,

 // 编辑/新增时间选择

 handleOpenChange1(open) {

 if (open) {

 this.mode1 = 'time';

 }

 },

 handlePanelChange1(value, mode) {

 this.mode1 = mode;

 },

 // 新增

 insertEvent() {

 this.selectRow = null

 this.showEdit = true

 },

 // 编辑

 editEvent(row) {

 debugger

 console.log(row)

 this.form = {

 name: row.name,

 number: row.number,

 qualification: row.qualification,

 qualified: row.qualified,

 statisTime: row.statisTime,

 }

 // this.form.validateFields((err, values) => {

 //   console.log(values)

 // })

 // this.form = row;

 this.showEdit = true;

 },

 // 表单保存提交

 submitTable(e) {

 e.preventDefault();

 this.form.validateFields((err, values) => {

 const times = {

 ...values,

 'statisTime': values['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),

 };

 console.log(times);

 if (!err) {

 console.log('Received values of form: ', values);

 this.dataSource.push(times);

 this.showEdit = false;

 } else {

 this.$message.warning("请确认数据是否正确");

 }

 });

 },

 // 表单保存重置

 reset(){},

 // onChange(checkedValues) {

 //   console.log("checked = ", checkedValues);

 //   console.log("value = ", this.value);

 // },

 findList() {

 // this.loading = true;

 // XEAjax.get(

 //   `/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`,

 //   this.formData

 // )

 //   .then(({ page, result }) => {

 //     this.tableData = result;

 //     this.tablePage.totalResult = page.totalResult;

 //     this.loading = false;

 //   })

 //   .catch((e) => {

 //     this.loading = false;

 //   });

 },

 findSexList() {

 // return XEAjax.get("/api/conf/sex/list").then((data) => {

 //   this.sexList = data;

 //   return data;

 // });

 },

 findRegionList() {

 // return XEAjax.get("/api/conf/region/list").then((data) => {

 //   this.regionList = data;

 //   return data;

 // });

 },

 submitEvent () {

 // this.submitLoading = true

 // setTimeout(() => {

 //   // this.submitLoading = false

 //   this.showEdit = false

 //   if (this.selectRow) {

 //     this.$message.success("保存成功！");

 //     // Object.assign(this.selectRow, this.formData)

 //   } else {

 //     this.$message.success("新增成功！");

 //     this.$refs.xTable.insert(this.formData)

 //   }

 // }, 500)

 },

 // 单个删除数据

 removeEvent (row) {

 this.$XModal.confirm('您确定要删除该数据?').then(type => {

 if (type === 'confirm') {

 this.$refs.xTable.remove(row)

 }

 })

 },

 // 保存

 saveEvent() {

 let {

 insertRecords,

 removeRecords,

 updateRecords,

 } = this.$refs.xTable.getRecordset();

 if (

 insertRecords.length ||

 removeRecords.length ||

 updateRecords.length

 ) {

 this.$message.success("保存成功！");

 this.searchEvent();

 } else {

 this.$message.warning("数据未改动！");

 }

 },

 // 校验

 vaildEvent() {

 this.$refs.xTable.validate((errMap) => {

 if (errMap) {

 this.$XModal.message({ status: "error", message: "校验不通过！" });

 } else {

 this.$XModal.message({ status: "success", message: "校验成功！" });

 }

 });

 },

 // 操作，多个删除

 dropdownMenuEvent(name) {

 switch (name) {

 case "remove": {

 let selectRecords = this.$refs.xTable.getCheckboxRecords();

 if (selectRecords.length) {

 this.$refs.xTable.removeCheckboxRow();

 } else {

 this.$message.warning("请至少选择一条数据！");

 }

 break;

 }

 case "export": {

 this.$refs.xTable.exportData();

 break;

 }

 }

 },

 searchEvent() {

 this.tablePage.currentPage = 1;

 this.findList();

 },

 handleSizeChange(current, size) {

 this.tablePage.pageSize = size;

 this.searchEvent();

 },

 handleCurrentChange(page, pageSize) {

 this.tablePage.currentPage = page;

 this.findList();

 },

 // visibleMethod({ data }) {

 //   return data.flag1 === "Y";

 // },

 roleSearchEvent({ row }, value) {

 this.ACProps.dataSource = this.restaurants.filter(

 (option) =>

 option.toUpperCase().indexOf((value || "").toUpperCase()) !== -1

 );

 },

 },

};

</script>

<style lang="less" scoped>

.realData{

 .vxe-toolbar{

 height: auto;

 #padding.topBot();

 }

 .ant-pagination{

 #padding.top();

 }

 .edit-form {

 #padding.topBot();

 #padding.padding();

 .ant-form-item {

 display: flex;

 }

 .submit-btn-box {

 display: flex;

 justify-content: center;

 padding-top: 40px;

 box-sizing: border-box;

 .submit-btn{

 background-color: #colors[subTone];

 border: 1px solid #colors[mainTone];

 }

 .reset {

 display: inline-block;

 margin-left: 20px;

 height: 33px;

 line-height: 33px;

 #padding.leftRight();

 border: 1px solid #colors[mainTone];

 color: #colors[mainTone];

 border-radius: 5px;

 }

 }

 }

 /deep/ .vxe-modal--header {

 padding-left: 64px;

 box-sizing: border-box;

 text-align: center;

 }

}

</style>