Essay: The VUE framework summarizes some of the problems and solutions encountered in the work

If there is infringement, delete in time

ElementFE lookup (github.com/ElemeFE/ele…).

Table form

About fixed properties

Problem description: Add fixed attribute, appear redundant horizontal line, scroll bar failure

Solution:

The first:

<style scoped>
    ::v-deep  .el-table__fixed,  ::v-deep  .el-table__fixed-right{
      height: 100% !important; // Set high priority to override inline styles
    }
   
  ::v-deep .el-table__fixed {
    height: 100% !important; // Let the height of the fixed column be adaptive and set! Important overrides the default style of ele-ui
    bottom: 18px; // Fixed column defaults to position: absolute; top: 0; left: 0; Just set the bottom value again so that the distance between the bottom of the fixed column and the parent element appears
  }

  ::v-deep .el-table__body-wrapper{
    z-index:2
  }
</style>
Copy the code

The second:

</el-table max-height="100%" > </el-table>Copy the code

The Input fields

About the type=number attribute

Symptom: When type is number, the maxLength number is invalid

Solution:

The first:

// use oninput instead of maxlength
<el-input 
    type="number" 
    oninput="If (value. Length > 11) value = value. The slice (0, 10)" 
    placeholder="Enter the user's mobile phone number to query" 
> 
</el-input>
Copy the code

The second:

// Limit the number of limits based on the maxLength passed in

<el-input
  @input="intValidator"
>
</el-input>

<script>
// propsObj (maxLength can be designed into obj) or pass maxLength separately// methods:
intValidator(e){
    if(this.obj.type ! = ='number' ) return
    let value = e.target.value.toString()
    // Judge not to exceed digits
    if(value.length > this.obj.maxLength ){
      value= value.slice(0.this.obj.maxLength)
      this.obj.phone = value
}
</script>
Copy the code

Description: When type is number, remove the up and down arrows above el-input

Solution:

<style>
 
.el-form--inline .el-form-item__content {
  width: auto ! important; } input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

</style>
Copy the code

About automatically converting to case

Input: convert the input box to uniform case (upper or lower case)

Solution:

The first kind of

  • The key events
    • keydown
    • keypress
    • keyup

<el-input v-model="idCard" type="text" onkeyup="this.value=this.value.toUpperCase()" />

Copy the code

The second,

  • Modify styles show case by style (Pay attention to: lowercase –> uppercase only the page effect is changed, but the saved value is the same as before lowercase)
    • Text-transform: uppercase/to uppercase /
    • Text-transform: lowercase/to lowercase /
    • Text-transform: Capitalize/Capitalize /
<input type="text" style="text-transform: uppercase;"  />
Copy the code

The third kind of

<el-input v-model="idCard" type="text" @blur="blur" /> //methods method blur(e){return this.idcard = e.target._value.toUpperCase() },Copy the code

Pagination paging

Problem description: Delete the page number change at the end

Solution:

  1. Use a listener to listen for this property and request data again when it changes to 3
  2. A look at the official documentation for the property methods in the listener listener object shows that strings are used
watch: { 
 params.pagenum': function () {
  this.getUsers() 
} },
Copy the code

Link graphic: explain

Picker date-time Picker

Description: The modification of the date picker is invalid after the initial value is set

Solution:

this.$set(this.formInline, 'dataTime', [res.startTime, res.endTime])
Copy the code

Essay recording ing

Problem description: Problem summary record ING

Solution: Keep updating……..