Summary of the skills of the element part of the Mid Autumn Festival

“ I'm participating in the Mid Autumn Festival Creative submission competition , Details please see : Mid Autumn Festival Creative submission contest

1、element The submission format of the selected time is Fri Sep 07 2018 00:00:00 GMT+0800 ( China standard time )

Turn into 2020-01-11 The format of

Remember in datepicker Add a sentence value-format=”yyyy-MM-dd”

<el-date-picker type="date" v-model="createdate" @change="formatTime" value-format="yyyy-MM-dd" placeholder=" Selection time "></el-date-picker>
 Copy code 

2、 Dynamic loop check box , Unable to select question

this.menulist[index].sonList.map((item)=>{
this.$set(item, 'checked', false); --- use vue Of set Attribute assignment
})
 Copy code 

3、el-form Dynamic form validation (v-if、v-show Causes the check to be invalid bug)

When using v-if or v-show To control el-form-item Show and hide , There will be verification failure bug.

  • Use v-if:element In the face of form The form contains prop Property to verify rule binding , Is in vue Declaration period mounted Accomplished .
  • and v-if The elements used to switch are destroyed , Led to v-if Form items in , Because in mounted The period is not rendered , So the rules are not bound . Rules will not be generated if they do not meet the display conditions during initialization , Causes the following switching conditions , The verification of the displayed input box will not take effect
  • Use v-show: All the rules are generated during initialization , Even if it is hidden, it will check the rules

resolvent

(1)、 Use v-if check Every v-if There's a different one in the back key value , That's it

(2)、 Custom validation rules , Like hands-on, you can customize the verification

4、Vue+element table How to disable some check boxes in a table

<el-table-column align="center" type="selection" :selectable='selectInit' width="55"/>
selectInit(row,index){
if(row.status==2){
return false // You can't check 
}else{
return true // Check 
}
}
 Copy code 

5、Element Form validation rules , How to avoid automatic triggering by emptying or filling data

this.$nextTick(()=>{
this.$refs['userInfo'].clearValidate();
})
 Copy code 

6、element-ui The interface returns data, but the view is not updated

1、vue Object does not allow dynamic addition of new root level responsive properties on created instances .( Reference resources vue Official website )

Calling method :Vue.set( target, key, value )

Parameters describe
target The data source to change ( It can be an object or an array )
key Specific data to be changed
value A new value

If you have to do this , We can use this.$set(),this.$set() It can take three parameters

  1. Data to bind words .
  2. The name of the attribute to be added or modified .
  3. Value to assign
this.$set(this.projectList, 'projectName', 'chenxuemin') -- Object specific
this.$set(this.items, 0, { message: " change one Value ", id: "0" });-- For arrays
 Copy code 

2、 Manually update the view

It can affect... In this example and this reality slot Slot content

this.$forceUpdate() // vm.$forceUpdate()
 Copy code 
Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15

2021-09-15

2021-09-15