Verify whether the input content of el-form conforms to the rules
need:
Verify whether the input content of el-form conforms to the rules
Implementation process:
1. Create a form. Includes two input boxes and a select drop-down box.
<el-form
:inline="true"
:model="searchList"
ref="search"
:label-position="labelPosition"
label-width="70px"
:rules="rules"
>
<el-form-item label="name" prop="name" label-width="70px">
<el-input v-model="searchList.name" :clearable="true" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="age" prop="age" label-width="70px">
<el-input v-model.number="searchList.age" :clearable="true" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="gender" prop="gender" label-width="70px">
<!-- whether filterable is searchable
clearable whether it can be cleared
default-first-option Press Enter in the input box to select the first matching item. Need to be used with filterable or remote -->
<el-select
v-model="searchList.gender"
filterable
clearable
default-first-option
placeholder="Please select gender"
style="width:150px"
>
<el-option
v-for="item in genderList"
:key="item.id"
:label="item.value"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
The meanings of the properties of el-form used are as follows:
The inline attribute allows the form field to become an inline form field.
model form field model field, this attribute is required when using the validate and resetFields methods.
label-position The position of the form field label. If the value is left or right, label-width needs to be set.
label-width label width
rules form validation rules
2. Define validation rules. Name and gender cannot be empty. Age cannot be a non-negative value.
<script>
export default {
data() {
return {
searchList: {
name: "",
age: "",
gender: ""
}, // Pass in the fields in the model of the Form component
genderList: [
{ id: 1, value: "female" },
{ id: 2, value: "male" }
],
rules: {
// el-form validation rules
name: [{ required: true, message: "Name cannot be empty" }],
age: [
{ type: "number", message: "Age must be a numeric value" },
{
//Verify that it is a non-negative number
validator: (rule, value, callback) => {
if (value < 0) {
callback(new Error("Age cannot be a negative number"));
} else {
callback();
}
}
}
],
gender: [{ required: true, message: "Gender cannot be empty" }]
}
};
},
};
</script>
3. Add a save button to the page and bind the save() method to process the verified data. If the verification rules are met, close the interface. If the verification rules are not met, a prompt will be displayed.
<el-button @click="save()">OK</el-button>
save(){
//Verify whether the el-form complies with the validation rules
this.$refs.search.validate(vaild=>{
if(vaild){
this.isShow = false;
} else {
this.$message.error({showClose: true,message: 'Please fill in the data according to the specifications', type: 'error'})
return
}
})
},
Effect:
When the input content does not comply with the rules, the display effect is as follows
Click OK and the pop-up prompt box will display as follows:
Realize closing the page and clearing all search items in el-form
need:
Realize closing the page and clearing all search items in el-form
Implementation process:
Bind a ref to the el-form that you want to clear the search terms, and then use this.$refs.XXX.resetFields().
this.$refs.search.resetFields()
resetFields: Reset the entire form, reset all field values to their initial values and remove the validation results.
Clear all check boxes in the table when closing the pop-up window
need:
Clear all check boxes in the table when closing the pop-up window
Implementation process:
1. Create a table
<el-table :data="tableList" ref="table" @selection-change="orderSelectionChange">
<el-table-column align="center" type="selection" width="60px"></el-table-column>
<el-table-column align="center" type="index" label="serial number" width="60px"></el-table-column>
<el-table-column align="center" prop="tableName" label="Name" min-width="80"></el-table-column>
<el-table-column align="center" prop="tableAge" label="Age" min-width="80"></el-table-column>
</el-table>
tableList: [
{ tableName: "李思", tableAge: "18" },
{ tableName: "Zhang San", tableAge: "20" }
] // List data in the pop-up window
2. Add the option to cancel all check marks when closing
this.$refs.table.clearSelection(); //Cancel all checked options
Dynamic display of the number of checked items
need:
Dynamically display the number of checked items
Implementation process:
1. Create a div and use @selection-change for el-table
<div style="background:rgba(98, 194, 208,0.5);padding:10px 0px;">Number of checked items: {<!-- -->{selectedList.length}}</div>
<el-table :data="tableList" ref="table" @selection-change="orderSelectionChange">
<el-table-column align="center" type="selection" width="60px"></el-table-column>
<el-table-column align="center" type="index" label="serial number" width="60px"></el-table-column>
<el-table-column align="center" prop="tableName" label="Name" min-width="80"></el-table-column>
<el-table-column align="center" prop="tableAge" label="Age" min-width="80"></el-table-column>
</el-table>
2. The content of the orderSelectionChange method is as follows
// Count the number of checked items
orderSelectionChange(selection) {
//Update check status
this.tableList.forEach(val => {
val.checked = selection.includes(val);
});
// Count the number of checked rows
this.selectedList = this.tableList.filter(val => val.checked);
},
Effect:
The complete code is as follows:
<template>
<div class="el_form">
<h1 class="info_title"></h1>
<el-button type="primary" @click="showDialog()">Click this button to open the pop-up window</el-button>
<!--title:title
visible: whether to display a pop-up window
width: pop-up window page width
before-close: callback before closing, function(done), done is used to close Dialog-->
<el-dialog :title="title" :visible.sync="isShow" width="60%" :before-close="close">
<!-- The inline attribute can make the form field an inline form field
model form field model field, this attribute is required when using the validate and resetFields methods.
label-position The position of the form field label. If the value is left or right, label-width needs to be set.
label-width label width
rules form validation rules -->
<el-form
:inline="true"
:model="searchList"
ref="search"
:label-position="labelPosition"
label-width="70px"
:rules="rules"
>
<el-form-item label="name" prop="name" label-width="70px">
<el-input v-model="searchList.name" :clearable="true" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="age" prop="age" label-width="70px">
<el-input v-model.number="searchList.age" :clearable="true" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="gender" prop="gender" label-width="70px">
<!-- whether filterable is searchable
clearable whether it can be cleared
default-first-option Press Enter in the input box to select the first matching item. Need to be used with filterable or remote -->
<el-select
v-model="searchList.gender"
filterable
clearable
default-first-option
placeholder="Please select gender"
style="width:150px"
>
<el-option
v-for="item in genderList"
:key="item.id"
:label="item.value"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div style="background:rgba(98, 194, 208,0.5);margin:10px 0px;">Number of checked items: {<!-- -->{selectedList.length}}</div>
<el-table :data="tableList" ref="table" @selection-change="orderSelectionChange">
<el-table-column align="center" type="selection" width="60px"></el-table-column>
<el-table-column align="center" type="index" label="serial number" width="60px"></el-table-column>
<el-table-column align="center" prop="tableName" label="Name" min-width="80"></el-table-column>
<el-table-column align="center" prop="tableAge" label="Age" min-width="80"></el-table-column>
</el-table>
<el-button @click="save()">OK</el-button>
<el-button @click="close()" type="primary">Close</el-button>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false, // Whether the pop-up window is displayed
title: "", // Pop-up window title
labelPosition: "right", // Alignment of form label
searchList: {
name: "",
age: "",
gender: ""
}, // Pass in the fields in the model of the Form component
genderList: [
{ id: 1, value: "female" },
{ id: 2, value: "male" }
],
rules: {
// el-form validation rules
name: [{ required: true, message: "Name cannot be empty" }],
age: [
{ type: "number", message: "Age must be a numeric value" },
{
//Verify that it is a non-negative number
validator: (rule, value, callback) => {
if (value < 0) {
callback(new Error("Age cannot be a negative number"));
} else {
callback();
}
}
}
],
gender: [{ required: true, message: "Gender cannot be empty" }]
},
tableList: [
{ tableName: "李思", tableAge: "18" },
{ tableName: "Zhang San", tableAge: "20" }
], // List data in the pop-up window
selectedList: [] // Data selected in the list in the pop-up window
};
},
methods: {
//Open the pop-up window
showDialog() {
this.isShow = true;
this.title = "Title";
},
// Count the number of check boxes
orderSelectionChange(selection) {
//Update check status
this.tableList.forEach(val => {
val.checked = selection.includes(val);
});
// Count the number of checked rows
this.selectedList = this.tableList.filter(val => val.checked);
},
// save
save() {
//Verify whether the el-form complies with the validation rules
this.$refs.search.validate(vaild => {
if (vaild) {
this.$refs.search.resetFields(); // Clear all search box data
this.isShow = false;
} else {
this.$message.error({
showClose: true,
message: "Please fill in the data according to the specifications",
type: "error"
});
return;
}
});
},
//Close pop-up window
close() {
//Show pop-up window confirming closing
this.$confirm("Confirm to close?")
.then(_ => {
this.isShow = false;
this.$refs.search.resetFields(); // Clear all search box data
this.$refs.table.clearSelection(); //Cancel all check options
done();
})
.catch(_ => {});
}
}
};
</script>
<style lang="scss" scoped>
.info_title {
text-align: center;
margin: 20px 0px;
}
</style>