Ant-Design-vue表单的编辑功能数据的回显

注意点:
        1. 需要将传入过来的数据进行深拷贝,否则在编辑弹框中修改数据会导致页面数据一起变化
        2. 在给a-form赋值时,需要调用this.$nextTick方法,否则会报错提示dom没有渲染,且赋值时需要按需赋值,这里调用lodash中的_.pick方法
        3. Ant-Design-vue中的<a-date-picker>组件他的值为一个Monent对象,在使用时或传入时都需要进行转换否则会报错。
      <a-form :form="addForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="姓名">
          <a-input v-decorator="['name', {rules:addRules.name}]"/>
        </a-form-item>
        <a-form-item label="年龄">
          <a-input v-decorator="['age',{rules:addRules.age}]"/>
        </a-form-item>
        <a-form-item label="出生日期">
          <a-date-picker style="width: 100%" v-decorator="['date',{rules:addRules.date}]" placeholder="请选择日期"
                         format="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item label="地址">
          <a-input v-decorator="['address',{rules:addRules.address}]"/>
        </a-form-item>
        <a-form-item label="性别">
          <a-select v-decorator="['gender',{rules:addRules.gender}]"
                    placeholder="请选择性别"
                    @change="handleSelectChange">
            <a-select-option value="male"> 男</a-select-option>
            <a-select-option value="female"> 女</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>


    <a-table :data-source="data" style="margin-top: 20px">
      <a-table-column key="name" title="姓名" data-index="name"/>
      <a-table-column key="age" title="年龄" data-index="age"/>
      <a-table-column key="gender" title="性别" data-index="gender"/>
      <a-table-column key="date" title="出生日期" data-index="date"/>
      <a-table-column key="address" title="地址" data-index="address"/>
      <a-table-column key="action" title="操作">
        <template v-slot="scope">
          <a-button @click="editUser(scope)">编辑</a-button>
          <a-button type="danger" style="margin-left: 10px">删除</a-button>
        </template>
      </a-table-column>
    </a-table>


    // 编辑按钮
    editUser(val) {
      this.modalType = 1
      this.visible = true
      const newForm = JSON.parse(JSON.stringify(val))
      this.$nextTick(() => {
          const pickedValues = _.pick(newForm, ['name', 'age', 'address', 'gender']);
          pickedValues.date = this.$moment(newForm.date, 'YYYY-MM-DD');
          this.addForm.setFieldsValue(pickedValues)
      })
    }
 
 

                
  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值