<template>
<div class="tableForm">
<div style="width:1200px;margin:50px auto;">
<a-table :columns="columns" :data-source="data">
<a-form-model
slot="wage"
slot-scope="text,record"
:ref="record.index"
:model="record"
:rules="rules"
style="width:300px;height:40px"
>
<a-form-model-item prop="wage">
<a-input style="width:100%" v-model="record.wage" />
</a-form-model-item>
</a-form-model>
<span slot="action">
<a>详情</a>
</span>
</a-table>
</div>
<div style="margin-top:50px;overflow:hidden;text-align:center">
<a-button @click="submit" size="large" type="primary">提交</a-button>
</div>
</div>
</template>
<script>
export default {
name: 'tableForm',
data() {
let validateWage = (rule, value, callback) => {
let reg = /^[+]?[0-9]+(\.[0-9]{1,3})?$/
if (value === '') {
callback(new Error('请输入值'))
} else if (!reg.test(value)) {
callback(new Error('请输入整数或小数'))
} else {
callback()
}
}
return {
form: {},
rules: {
wage: [{ validator: validateWage, trigger: 'change' }]
},
columns: [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
align: 'center',
scopedSlots: { customRender: 'name' }
},
{
title: '工资',
dataIndex: 'wage',
width: '300px',
key: 'wage',
align: 'center',
scopedSlots: { customRender: 'wage' }
},
{
title: '操作',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
}
],
data: [
{ key: 1, wage: '', name: '张三', index: 'form1' },
{ key: 2, wage: '', name: '张三', index: 'form2' },
{ key: 3, wage: '', name: '张三', index: 'form3' }
]
}
},
methods: {
submit() {
let submitFlag = false
for (var key in this.$refs) {
this.$refs[key].validate((valid) => {
if (valid) {
// alert('submit!')
} else {
submitFlag = true
return false
}
})
}
if (!submitFlag) {
alert('submit!')
}
}
}
}
</script>
<style lang="less" scoped>
</style>
