业务需要;须要 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
“