antd-vue table 动态添加必填项
import Schema from 'async-validator'async handleValidate () {const length = this.tableData.lengthfor (let index = 0; index < length; index++) {for await (let form of (this.tableData[index].extraInf
·
首先我们使用 async-validator 库进行校验. 详情内容请查看: 使用 async-validator 自定义校验规则实现 table 组件的循环表单校验功能.
校验方式跟上述案例是一致的.代码如下:
import Schema from 'async-validator'
// 校验
validate (validateProp, rules, value) {
// 真正校验的的时候再生成validator函数
if (!validateProp || !rules) return Promise.resolve(true)
const descriptor = {
[validateProp]: rules,
}
const validator = new Schema(descriptor)
if (!validator) return Promise.resolve(true)
const model = {
[validateProp]: value,
}
return validator.validate(model, (errors, fields) => {
const errorMessage = errors ? errors[0].message : ''
return !errorMessage
})
},
如何动态添加字段的校验规则呢?
const requiredRule = [{ required: true, message: '该选项必填' }]
async handleValidate () {
const length = this.tableData.length
// this.tableData 为 商品 table
for (let index = 0; index < length; index++) {
for await (let form of (this.tableData[index].extraInfo || [])) {
// 必填校验
if (form.required) {
try {
// 调用校验方法 validate
await this.validate(form.attrField, requiredRule, this.tableData[index][form.attrField])
} catch (err) {
this.$antdMessage.warning(`请完善第 ${index + 1} 行货物补充信息`)
return Promise.resolve(false)
}
}
}
}
return Promise.resolve(true)
},
提交调用
async handleSubmit () {
const { tableData, validate, deleteIds } = this.$refs.goods
if (tableData.length === 0) {
return this.$antdMessage.warning('请至少添加一条商品信息')
} else {
// 强制更新货物补充信息
this.$refs.info.getData(tableData)
let isVerify = await this.$refs.info.handleValidate()
if (!isVerify) return
}
......
},
getData 方法
getData (val) {
this.tableData = [...val].map((item) => {
return this.handleData(item)
})
},
handleData 数据处理
handleData (row) {
let initForm = []
let data = this.sourceData.find(item => item.bindDimensionCode === row.varietyCode)
if (data === undefined || (data.bindDimensionAttrs && !data.bindDimensionAttrs.length)) {
// 兼容入库
if (this.modal === 'orderIn') {
return { ...row }
}
return []
}
data.bindDimensionAttrs.forEach(formItem => {
initForm.push({
...formItem,
attrValueCode: row[formItem.attrField],
// select 下拉框
attrValueName: formItem.attrType === 'OPTION' ? row[`${formItem.attrField}Name`] : row[formItem.attrField],
})
})
return { ...row, extraInfo: initForm }
},
监听 data 源数据
watch: {
data: {
async handler (val) {
if (!val) return (this.tableData = [])
this.sourceData = await this.getInit()
this.getData(val)
},
deep: true,
},
},
async getInit () {
const { data } = await Common.getInvAttrField({ userRange: this.userRange })
return data
},
更多推荐
已为社区贡献60条内容
所有评论(0)