<template>
<el-table :data="form.list">
<el-table-column>
<template slot-scope="scope">
<el-form :ref="'form' + scope.$index" :model="form">
<el-form-item :prop="'form.' + scope.$index + '.code'" :rules="rules.code">
<el-input v-model.trim="scope.row.code" clearable />
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="save(row, scope.$index)">保存</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data () {
return {
form: {
list: []
},
rules: {
code: [{ required: true, trigger: 'blur', message: '请输入内容' }]
}
}
},
methods: {
save(row, index) {
this.$refs['form' + index].validate((valid) => {
if (valid) {
let obj = JSON.parse(JSON.stringify(row))
...
}
})
}
}
}
</script>
Vue项目 table中嵌套form指定校验
于 2023-11-27 15:56:08 首次发布