5
Business requirements; need to edit certain items or items in the table; and need to check the rules

image.png

1. Place the form-model in the 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. Place the table inside the 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
})

The point is: prop=" siteList.${index}.endTime "


songxianling1992
1.3k 声望3.6k 粉丝

当你不知道该选择哪条路的时候;可能你已经走了好一阵子了~