关于antd-vue:antd-vue-table表格内添加表单验证方法

42次阅读

共计 1796 个字符,预计需要花费 5 分钟才能阅读完成。

业务需要;须要 table 内的某项或者某些项能编辑;并且须要校验规定

1. 在 form-model 搁置在 table 内

<!-- html -->
<advance-table
    bordered
    :scroll="{x:'100%',y: 300}"
    :columns="columns_white_list_edit"
    :data-source="siteList"
    :rowKey="(row,index) => row.siteId"
    :rowSelection="{selectedRowKeys:selectedRowKeysSite,onChange:onChangeSite,columnWidth:50}"
    :pagination="paginationSite"
    @change="handleTableChangeSite"
    :showToolbar="false"
  >
    <a-form-model :model="record" :ref="`formData_${index}`" slot="endTime" class="handle-btn-box" slot-scope="{text, record, index}">
      <a-form-model-item prop="endTime" :rules="{required: true, message:' 请抉择 '}" >
        <a-date-picker v-model="record.endTime" @change="changeItemTime(record.siteId,index)" showTime format="YYYY-MM-DD hh:mm:ss" valueFormat="YYYY-MM-DD hh:mm:ss" :getCalendarContainer="() => win.document.body" />
      </a-form-model-item>
    </a-form-model>
  </advance-table>

<!-- js -->
for (const key in _this.$refs) {if (key === 'con') break
  _this.$refs[key].validate(async valid => {if (!valid) return false
  })
}

2. 将 table 搁置在 form-model 内

<!-- html -->
<a-form-model :model="reqData" ref="formData">
  <advance-table
    bordered
    :scroll="{x:'100%',y: 300}"
    :columns="columns_white_list_edit"
    :data-source="reqData.siteList"
    :rowKey="(row,index) => row.siteId"
    :rowSelection="{selectedRowKeys:selectedRowKeysSite,onChange:onChangeSite,columnWidth:50}"
    :pagination="paginationSite"
    @change="handleTableChangeSite"
    :showToolbar="false"
  >
    <template slot="endTime" slot-scope="{text, record, index}">
      <a-form-model-item :prop="`siteList.${index}.endTime`" :rules="{required: true, message:' 请抉择 '}" >
        <a-date-picker v-model="record.endTime" showTime format="YYYY-MM-DD hh:mm:ss" valueFormat="YYYY-MM-DD hh:mm:ss" :getCalendarContainer="() => win.document.body" />
      </a-form-model-item>
    </template>
  </advance-table>
</a-form-model>

<!-- js -->
_this.$refs.formData.validate(async valid => {if (!valid) return
})

重点是 :prop=”siteList.${index}.endTime

正文完
 0