- 24
- 0
我现在需要获取antd表格中的form数据,获取不到,请帮忙看看谢谢,代码如下:
这里面alert弹出的内容是空的json,我需要获取提交的数据怎么处理,谢谢!
<template>
<div style="width: 90%">
<a-card title="填写测试项" >
<a-form :form="form">
<a-table
:columns="columns"
:dataSource="data"
:pagination="false"
bordered
>
</a-table>
</a-form>
</a-card>
<a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
</div>
</template>
<script type="text/jsx">
import AFormItem from 'ant-design-vue/es/form/FormItem'
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 }
}
const data = [
{
id: 1,
syyq: '实验要求1',
zxz: '1',
jg: '请输入实验结果',
pd: '合格,不合格,不适用'
},
{
id: 2,
syyq: '实验要求2',
zxz: '2',
jg: '请输入实验结果2',
pd: '合格,不合格,不适用'
},
{
id: 3,
syyq: '实验要求3',
zxz: '3',
jg: '请输入实验结果3',
pd: '合格,不合格,不适用'
}
]
export default {
name: 't8',
components: {AFormItem},
data () {
return {
data: data,
form: this.$form.createForm(this),
formItemLayout: formItemLayout,
columns: [
{
title: '实验要求',
dataIndex: 'syyq',
align: 'center'
},
{
title: '准许值',
dataIndex: 'zxz',
align: 'center'
},
{
title: '结果',
dataIndex: 'jg',
align: 'center',
customRender: function (text, record, index) {
return (
<a-form-item>
<a-input placeholder={text} key={text} ref={index}/>
</a-form-item>);
}
},
{
title: '判定',
dataIndex: 'pd',
align: 'center',
customRender: function (text, record, index) {
return (
<a-form-item><a-select placeholder="选择操作" style="width:100%" key = {text} >
{ text.split(',').map(
item => <a-select-option value="{item}">{item}</a-select-option>
)
}
</a-select>
</a-form-item>
);
}
},
]
}
},
methods: {
handleSubmit () {
alert(JSON.stringify(this.form.getFieldsValue()))
}
}
}
</script>
<style scoped>
</style>
- 共 0 条
- 全部回答
-
B毛不烫自然卷 普通会员 1楼
在使用Ant Design库时,如果数据获取不到问题,可以按照以下步骤进行排查:
-
确保在Ant Design库的官方文档中找到了你的数据源,如果找不到,你可以通过
https://ant Design Chinese GitHub repository查找。 -
确保你已经正确引入了Ant Design库。在你的项目中添加以下引用: ```
`` 确保antd`库版本与你的项目版本匹配。- 确保你已经正确地设置了数据源。你可以通过以下代码设置数据源: ```javascript import { Table } from 'antd'; import { useEffect } from 'react';
const data = [ { id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Doe' }, { id: 3, name: 'Bob Smith' }, ];
const App = () => { useEffect(() => { // 在这里获取数据源 const dataSource = [...data]; console.log(dataSource); }, []);
return (
); };export default App;
`` 在上述代码中,我们首先使用useStateHook在组件的useEffect`中获取数据源。然后,我们将获取到的数据打印到控制台。- 确保你的数据是正确的。如果你的数据源是一个对象数组,你应该在每个对象上定义一个
name属性。例如:javascript const data = [ { id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Doe' }, { id: 3, name: 'Bob Smith' }, ];如果数据源是一个数组,你应该在每个对象上定义一个name属性。例如:javascript const data = [ { id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Doe' }, { id: 3, name: 'Bob Smith' }, ]; -
确保你的数据加载成功。如果数据加载失败,你可以检查你的网络连接、服务器状态、请求头等。你也可以在控制台打印错误信息,以帮助你定位问题。
-
如果以上步骤都无法解决问题,你可能需要联系Ant Design的社区,或者查看他们的官方文档和示例代码,以获取更详细的帮助。
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
