“I am participating in the Mid-Autumn Festival Creative Submission Contest. Please see: Mid-Autumn Festival Creative Submission Contest for details.”

1, Element time selection submission format is Fri Sep 07 2018 00:00:00 GMT+0800 (China Standard Time)

Convert to 2020-01-11 format

Remember to add value-format= “YYYY-MM-DD” to datepicker

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

2. The problem cannot be selected when the dynamic cycle check box is displayed

this.menulist[index].sonList.map((item) = >{
    this.$set(item, 'checked'.false); -- Assign vue set attribute})Copy the code

3, El-Form dynamic form validation (V-IF, V-show caused validation invalid bug)

A validation failure bug occurs when using V-if or V-show to control show and hide of an El-form-item.

  • Use V-if: Element to attach validation rules to prop components in the vUE declaration cycle.
  • The elements used by v-if to switch are destroyed, resulting in the form items in V-IF not rendered, so the rules are not bound. If the input box does not meet the display conditions during initialization, no rule will be generated. As a result, the verification of the displayed input box will not take effect due to the following switching conditions
  • With V-show: all rules are generated during initialization and verified even if hidden

The solution

(1) Use v-if to verify each V-if with a different key value, so it is ok

(2), custom verification rules, like hands-on can customize their own verification

4, How to disable partial check boxes in Vue+ Element table

<el-table-column align="center" type="selection" :selectable='selectInit' width="55"/>

selectInit(row,index){
        if(row.status==2) {return false  // Untick
        }else{    
            return true  / / can be checked}}Copy the code

5. How to avoid automatic triggering of Element’s form validation rules to empty or fill data

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

6. The Element-UI interface returns data but the view is not updated

Vue objects do not allow new root-level reactive properties to be dynamically added to created instances. (Refer to vUE official website)

Vue. Set (target, key, value)

parameter describe
target The data source to change (can be an object or array)
key The specific data to change
value The reassigned value

If we must, we can use this.$set(), which takes three arguments

  1. Data to bind.
  2. The name of the property to add or modify.
  3. To assign a value
this.$set(this.projectList, 'projectName'.'chenxuemin') -- object specificthis.$set(this.items, 0, { message: "Change the value of one".id: "0"}); -- For arraysCopy the code

2. Manually update the view

It can affect the slot slot content in this instance and in this instance

this.$forceUpdate() // vm.$forceUpdate()
Copy the code