Резюме/Чжу Цзицянь
Недавно функция динамической формы была реализована через Vue + Element ui. Эта функция также включает в себя функции добавления новых строк, удаления строк, динамической проверки формы и отправки динамической формы в динамических формах. Ударьте железом, пока оно горячее, и запишите. опыт разработки, чтобы облегчить использование подобных функций в будущем. При использовании применяйте их напрямую.
Упрощенный рендеринг страницы выглядит следующим образом:
Сначала я использовал чистую форму. Позже я обнаружил, что проверить каждое поле ввода при отправке непросто. Если это форма, вы можете напрямую установить значение каждого поля ввода с помощью правил, поэтому я вложил его. форма внутри формы. Следует отметить, что :prop="scope. в el-form-item.
<template>
<div >
<div>
<div>
<el-button size="small" @click="addRow">Новый</el-button>
</div>
<!--наборформа-->
<el-form :model="studentData" ref="data" label-width="auto">
<el-table
border
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
:data="studentData"
ref="table"
style="width: 100%"
>
<el-table-column align="center" label="Имя">
<template slot-scope="scope">
<!--лист Вложенный внутриформа-->
<el-form-item
:prop="scope.$index + '.name'"
:rules="{ required: true, message: 'Имя не может быть пустым', trigger: 'blur' }"
>
<el-input
v-model="studentData[scope.$index].name"
autocomplete="off"
size="small"
заполнитель="имя"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" label="возраст">
<template slot-scope="scope">
<el-form-item
:prop="scope.$index + '.age'"
:rules="{ required: true, message: «Возраст не может быть пустым», trigger: 'blur' }"
>
<el-input
v-model="studentData[scope.$index].age"
autocomplete="off"
size="small"
type='number'
Placeholder="номер банка, открывающего счет получателя"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" label="пол">
<template slot-scope="scope">
<el-form-item
:prop="scope.$index + '.sex'"
:rules="{ required: true, message: «Пол не может быть пустым», trigger: 'blur' }"
>
<el-input
v-model="studentData[scope.$index].sex"
autocomplete="off"
size="small"
заполнитель = «пол»
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column fixed="right" метка="операция" width="100">
<template slot-scope="scope">
<el-button
@click="handleDeleteRow(studentData[scope.$index])"
type="text"
size="small"
>удалить</el-button
>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
<div slot="footer" class="dialog-footer" style="margin-bottom: 10px">
<el-button size="mini" @click="submit">представлять на рассмотрение</el-button>
<el-button size="mini" @click="resetForm()">перезагрузить</el-button>
</div>
</div>
</template>
Определите переменную массива для хранения данных динамической таблицы.
export default {
data() {
return {
studentData:[],
};
},
......
}
Добавьте связанные методы в метод методов, а именно добавление строк, удаление строк и отправку ——
methods:{
/**
* Добавить новую строку
*/
addRow() {
let index = this.studentData.length ;
this.studentData.push({
key: index,
name:'',
age:'',
sex:'',
});
},
/**
* Удалить строку
* @param row
*/
handleDeleteRow(row){
let datas = this.studentData;
for (var i = 0; i < datas.length; i++){
if (datas[i].key == row.key){
datas.splice(i,1);
}
}
},
/**
* представлять на рассмотрение
*/
submit() {
this.$refs["data"].validate(valid => {
//valid имеет значение true, что означает, что форма была проверена. Если значение false, это означает, что форма не прошла проверку.
if (valid) {
save(this.studentData).then(response => {
this.$message({
message: 'представлять на рассмотрениеуспех',
type: 'success'
});
});
}
});
},
/**
* перезагрузить
*/
resetForm() {
let datas = this.studentData;
for (var i = 0; i < datas.length; i++){
datas[i].name='';
datas[i].age='';
datas[i].sex='';
}
},
}
Установите правила проверки формы, которые можно установить единообразно в правилах, или вы можете установить их индивидуально в каждом поле ввода. Здесь я устанавливаю их в каждом поле ввода индивидуально, то есть: Rules="{ требуется: true, message: 'Name. не может быть пустым. ', триггер: 'blur' }" это нормально. Конечно, вы также можете создать более сложные пользовательские правила.
<el-table-column align="center" label="Имя">
<template slot-scope="scope">
<!--лист Вложенный внутриформа-->
<el-form-item
:prop="scope.$index + '.name'"
:rules="{ required: true, message: 'Имя не может быть пустым', trigger: 'blur' }"
>
<el-input
v-model="studentData[scope.$index].name"
autocomplete="off"
size="small"
заполнитель="имя"
></el-input>
</el-form-item>
</template>
</el-table-column>