Elment ui 动态表格与表单校验 列表数据 组件
在使用Element UI创建动态表格并结合表单验证时,可以使用el-table
组件来展示数据,el-form
组件来收集用户输入并进行验证,以及el-button
组件来触发表单提交。以下是一个简单的例子,展示了如何创建一个带有动态行的表格,并对每行数据进行验证:
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-table :data="form.items" style="width: 100%;">
<el-table-column prop="name" label="名称" width="180">
<template slot-scope="scope">
<el-form-item :prop="'items.' + scope.$index + '.name'" :rules="rules.name">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄" width="180">
<template slot-scope="scope">
<el-form-item :prop="'items.' + scope.$index + '.age'" :rules="rules.age">
<el-input type="number" v-model.number="scope.row.age"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="addItem">添加</el-button>
<el-button @click="removeItem(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
items: [
{ name: '', age: null }
]
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须是数字值', trigger: 'blur' }
]
}
};
},
methods: {
addItem() {
this.form.items.push({ name: '', age: null });
},
removeItem(index) {
this.form.items.splice(index, 1);
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('提交成功!');
} else {
console.log('验证失败');
return false;
}
});
}
}
};
</script>
在这个例子中,我们定义了一个form
对象,它包含一个items
数组,这个数组中的每个对象都代表表格中的一行。el-form-item
组件用于每列数据的验证,并且通过v-for
指令在el-table-column
中创建了动态行。submitForm
方法用于触发表单验证,并在验证通过后处理提交逻辑。
评论已关闭