Theme style Changes
There was a time when a project went through hundreds of styles in order to change the style of a component, only to discover that a custom theme was enough!
The first step is to change the background color, font color and border color on the theme page of the official website
Step 2, download the theme
Step 3: Replace the default CSS file with the downloaded CSS file
The effect is as follows:
El-backtop goes backto the top component
Sometimes the page is very long and we need a button to go backto the top. We recommend using el-Backtop, which has its own transition effect.
The code is as follows:
<template>
<div class="container">
<div class="box">Scroll down to see the bottom-right button.</div>
<el-backtop target=".container">
<i class="el-icon-caret-top"></i>
</el-backtop>
</div>
</template>
<style lang="scss" scoped>
.container {
height: 100vh;
overflow-x: hidden;
.box {
padding: 20px;
height: 1500px; }}</style>
Copy the codeNote: You need to set the body margin to 0, otherwise there will be two scroll bars.
El-form-item label width adaptive
Usually we give the label a fixed width, but this completely limits the UI. How do we make the label width adaptive? The answer is to give the control a fixed width.
The code is as follows:
<template>
<el-form>
<el-form-item label="Teacher">
<el-input v-model="form.teacher" style="width: 625px;"></el-input>
</el-form-item>
<el-form-item label="Please select the name of online teaching platform">
<el-select v-model="form.platform" style="width: 500px;">
<el-option label="Platform 1" value="1"></el-option>
<el-option label="Platform 2" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
teacher: ' '.platform: ' '}}}}</script>
Copy the codeEl-form-item loop check
Sometimes form items are a circular list, and each item needs to be validated.
The code is as follows:
<template>
<div>
<el-form :model="form" label-width="100px" ref="form">
<el-form-item
v-for="(item, index) in form.list"
:key="index"
:label="' Evaluation item '+ (index + 1)"
:prop="'list.' + index + '.evaluateName'"
:rules="rules.evaluateName"
>
<el-input v-model="item.evaluateName" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">submit</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
list: [{evaluateName: ' '
},
{
evaluateName: ' '
},
{
evaluateName: ' '}},rules: {
evaluateName: [{required: true.message: 'Please enter an evaluation item'.trigger: 'blur'}]}}},methods: {
submitForm() {
this.$refs.form.validate(valid= > {
if (valid) {
alert('submit! ')}else {
console.log('error submit!! ')
return false}})}}}</script>
Copy the codeEl-form-item form nested table validation
If you have nested tables in a form, how do you validate the controls in the form?
The code is as follows:
<template>
<el-form :model="form" ref="form">
<el-table border :data="form.list" style="margin-bottom: 10px;">
<el-table-column
label="Evaluation items"
prop="evaluateName"
align="center"
></el-table-column>
<el-table-column label="Rating level" align="center">
<template slot-scope="scope">
<el-form-item
:prop="'list.' + scope.$index + '.evaluateLevel'"
:rules="rules.evaluateLevel"
class="evaluate-level"
>
<el-radio-group class="radio-group" v-model="scope.row.evaluateLevel">
<el-radio
v-for="evaluationItem in evaluateOptions"
:key="evaluationItem.value"
:label="evaluationItem.value"
>
{{ evaluationItem.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
</el-table-column>
</el-table>
<el-form-item>
<el-button type="primary" class="submit-btn" @click="submitOpinionCheck">submit</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
list: [{id: '01'.evaluateName: 'Indicator 1'.evaluateLevel: ' '
},
{
id: '02'.evaluateName: 'Indicator 2'.evaluateLevel: ' '
},
{
id: '03'.evaluateName: 'Indicator 2'.evaluateLevel: ' '}},evaluateOptions: [{value: '1'.label: 'best'
},
{
value: '2'.label: 'good'
},
{
value: '3'.label: 'in'
},
{
value: '4'.label: 'poor'}].rules: {
evaluateLevel: [{ required: true.message: 'Please select rating level'.trigger: 'change'}}}},methods: {
submitOpinionCheck() {
this.$refs.form.validate(valid= > {
if (valid) {
alert('submit! ')}else {
console.log('error submit!! ')
return false}})}}}</script>
<style lang="scss" scoped>
.evaluate-level {
::v-deep .el-form-item__error {
width: 100px;
/* Center the verification information */
left: calc(50% - 50px); }}</style>
Copy the codeEl-form-item form validation label only * is reserved
Sometimes we just need the * for form validation without the lable text, like this:
The code is as follows:
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30px">
<el-form-item label="" prop="name">
<el-input v-model="ruleForm.name" placeholder="Please enter an activity name"></el-input>
</el-form-item>
<el-form-item label="" prop="region">
<el-select v-model="ruleForm.region" placeholder="Please select the active area.">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Area two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">submit</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: ' '.region: ' '
},
rules: {
name: [{ required: true.message: 'Please enter an activity name'.trigger: 'blur'}].region: [{ required: true.message: 'Please select active area'.trigger: 'change'}}}},methods: {
submitForm(formName) {
this.$refs[formName].validate(valid= > {
if (valid) {
alert('submit! ')}else {
console.log('error submit!! ')
return false}})}}}</script>
Copy the codeEl-select Drop-down box style modification
Using style penetration to change the dropdown style, you will find that it does not work because the dropdown is mounted under the body by default. Popper-append-to-body =”false”
The code is as follows:
<template>
<el-form>
<el-form-item label="Active area">
<el-select
class="form-select"
:popper-append-to-body="false"
v-model="form.region"
placeholder="Please select the active area."
>
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Area two" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
region: ' '}}}}</script>
<style lang="scss" scoped>
.form-select{ ::v-deep .el-select-dropdown__item.selected { background: pink; }}</style>
Copy the codeEl-input Enables automatic focus of the pop-up box
Most forms are nested under dialogs. To improve the user experience, the input box needs to be automatically focused when the popup box is opened.
The code is as follows:
<template>
<div>
<el-button type="text" @click="showDialog">Opens the Dialog for the nested form</el-button>
<el-dialog title="Activity" :visible.sync="dialogVisible">
<el-form :model="form">
<el-form-item label="Activity Name" label-width="80px">
<el-input ref="nameInput" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Activity Content" label-width="80px">
<el-input v-model="form.content"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">Take away</el-button>
<el-button type="primary" @click="dialogVisible = false">determine</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false.form: {
name: ' '.content: ' '}}},methods: {
showDialog() {
this.dialogVisible = true
// If the popup box displays, it will automatically focus
this.$nextTick(() = > {
this.$refs.nameInput.focus()
})
}
}
}
</script>
Copy the codeSo much for today’s sharing, I hope to help you! Don’t forget to give it a thumbs up if it helps
I heard that you like to praise, this year’s year-end award to get soft 😍