账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    获取antd中的数据获取不到问题
    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
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • B毛不烫自然卷 普通会员 1楼

      在使用Ant Design库时,如果数据获取不到问题,可以按照以下步骤进行排查:

      1. 确保在Ant Design库的官方文档中找到了你的数据源,如果找不到,你可以通过https://ant Design Chinese GitHub repository查找。

      2. 确保你已经正确引入了Ant Design库。在你的项目中添加以下引用: ```

      `` 确保antd`库版本与你的项目版本匹配。

      1. 确保你已经正确地设置了数据源。你可以通过以下代码设置数据源: ```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`中获取数据源。然后,我们将获取到的数据打印到控制台。

      1. 确保你的数据是正确的。如果你的数据源是一个对象数组,你应该在每个对象上定义一个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' }, ];
      2. 确保你的数据加载成功。如果数据加载失败,你可以检查你的网络连接、服务器状态、请求头等。你也可以在控制台打印错误信息,以帮助你定位问题。

      3. 如果以上步骤都无法解决问题,你可能需要联系Ant Design的社区,或者查看他们的官方文档和示例代码,以获取更详细的帮助。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部