ant design vue常用弹窗+表单

<template>
  <div>
    <a-modal
      title="标题"
      :visible="visible"
      :width="600"
      :confirmLoading="confirmLoading"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">返回</a-button>
        <a-button key="submit" type="primary" :loading="confirmLoading" @click="handleOk">确认</a-button>
      </template>
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="Note">
          <a-input
            v-decorator="['note', { rules: [{ required: true, message: 'Pleas
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,ant-design-vue可以通过内置的Form组件和Table组件实现表格内部字段验证功能。具体步骤如下: 1. 在表格中添加需要验证的字段,例如下面的代码中的name和age字段: ```html <a-form :form="form"> <a-form-item label="Name" :rules="[{ required: true, message: 'Please input name' }]"> <a-input v-decorator="['name']" /> </a-form-item> <a-form-item label="Age" :rules="[{ required: true, message: 'Please input age' }]"> <a-input-number v-decorator="['age']" /> </a-form-item> </a-form> <a-table :columns="columns" :dataSource="dataSource" :pagination="false" /> ``` 2. 在表格中添加操作列,例如下面的代码中的操作列包含了编辑和删除按钮: ```html <a-table :columns="columns" :dataSource="dataSource" :pagination="false"> <template #action="text, record"> <a-button @click="edit(record)">Edit</a-button> <a-button @click="delete(record)">Delete</a-button> </template> </a-table> ``` 3. 在编辑操作中打开表单,并将当前行的数据绑定到表单中: ```javascript edit(record) { this.form.setFieldsValue(record); this.editingKey = record.key; } ``` 4. 在表单中添加保存按钮,并在点击保存按钮时进行表单验证和数据更新: ```html <a-form :form="form"> <a-form-item label="Name" :rules="[{ required: true, message: 'Please input name' }]"> <a-input v-decorator="['name']" /> </a-form-item> <a-form-item label="Age" :rules="[{ required: true, message: 'Please input age' }]"> <a-input-number v-decorator="['age']" /> </a-form-item> <a-form-item> <a-button type="primary" @click="save">Save</a-button> </a-form-item> </a-form> ``` ```javascript save() { this.form.validateFields((err, values) => { if (!err) { const newData = [...this.dataSource]; const index = newData.findIndex((item) => this.editingKey === item.key); if (index > -1) { const item = newData[index]; newData.splice(index, 1, { ...item, ...values }); this.dataSource = newData; this.editingKey = ''; } else { newData.push(values); this.dataSource = newData; this.editingKey = ''; } } }); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值