elementUI的表单里套表格加验证的demo
2022-10-09 本文已影响0人
Frank_Fang
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>elementUI</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
#app {
width: 600px;
margin: 30px;
}
</style>
</head>
<body>
<div id="app">
<el-form :model="myModel" :rules="rules" ref="myForm" size="small" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="myModel.name" clearable></el-input>
</el-form-item>
<el-form-item label="家人" prop="family" required>
<el-button type="success" size="small" style="margin-bottom: 10px;" plain icon="el-icon-plus"
@click="addFamily">添加</el-button>
<el-table :data="myModel.family" size="medium" border>
<el-table-column prop="relation" label="关系">
<template slot-scope="scope">
<el-form-item :prop="'family.' + scope.$index + '.relation'" :rules="rules.relation"
style="margin-bottom: 0;">
<el-select v-model="scope.row.relation" clearable>
<el-option label="父母" value="1"></el-option>
<el-option label="夫妻" value="2"></el-option>
<el-option label="子女" value="3"></el-option>
</el-select>
</el-form-item>
</template>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<el-form-item :prop="'family.' + scope.$index + '.name'" :rules="rules.name"
style="margin-bottom: 0;">
<el-input v-model="scope.row.name" clearable></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item>
<el-button type="primary" size="medium" @click="submitForm('myForm')">提交</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el: "#app",
data: {
myModel: {
name: '',
family: []
},
rules: {
name: {
required: true,
message: '请输入姓名',
trigger: ['change', 'blur']
},
relation: {
required: true,
message: '请选择关系',
trigger: ['change', 'blur']
}
}
},
methods: {
addFamily() {
this.myModel.family.push({
relation: "",
name: "",
email: ""
});
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
})
</script>
</body>
</html>
