This article is reproduced from WeChat official account
If there is infringement, please contact me

1. When there is only one input under the form, press enter to refresh the page
The reason is that the default submission behavior of the form is triggered, and @ submit. Is added to the El form native. Just prevent.

<el-form inline @submit.native.prevent>
  <el-form-item label="order number">
    <el-input
      v-model="query.orderNo"
      :placeholder="Enter order number query"
      clearable
      @keyup.enter.native="enterInput"
    />
  </el-form-item>
</el-form>

2. The last row of the fixed column of the table is not fully displayed

This sometimes occurs when the width is just at the critical value. Because the fixed column dynamically calculates the height independently of the table body, the fixed column height is less than the table height, so the last row is blocked.

// Set global
.el-table__fixed-right {
  height: 100% !important;
}

3. The confirm event in the bubble confirmation box document does not take effect
Version: element UI: "2.13.2", vue: "2.6.10"

// Change confirm to onConfirm
@onConfirm="onDeleteOrder(row.id)"

4. The input box is restricted by regular, but the binding value is not updated
See the following code in the project:

<el-input 
  v-model="form.retailMinOrder" 
  placeholder="Please enter" 
  @keyup.native="form.retailMinOrder=form.retailMinOrder.replace(/[^\d.]/g,'')"
/>

5. Remove the up and down arrows when the type="number" input box is focused

/* Set global */
.clear-number-input.el-input::-webkit-outer-spin-button,
.clear-number-input.el-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
} 
.clear-number-input.el-input input[type="number"]::-webkit-outer-spin-button,
.clear-number-input.el-input input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}
.clear-number-input.el-input {
  -moz-appearance: textfield;
} 
.clear-number-input.el-input input[type="number"] {
  -moz-appearance: textfield;
}

<el-input type="number" class="clear-number-input" />

6. Verify only one field of the form
In some user registration scenarios, we sometimes check some individual fields before submitting the whole form, such as sending the mobile phone verification code. When sending, we only need to check the mobile phone number field, which can be done as follows:

this.$refs['form'].validateField('mobile', valid => {
  if (valid) {
    // Send verification code
  }
})
// If multiple parameters are required, change the parameters to array form.

7. When the pop-up window is reopened, the last verification information of the form is not cleared
Someone will reset the form in $nextTick when open ing, but I choose to reset it when closing.

<el-dialog @close="onClose">
  <el-form ref="form">
  </el-form>
</el-dialog>

// Reset form when pop-up window closes
onClose() {
  this.$refs['form'].resetFields()
}

8. Misplaced header and content
There are other methods on the Internet, but I remember they didn't work for me. Later, I used the following method:

// Global settings
.el-table--scrollable-y .el-table__body-wrapper {
 overflow-y: overlay !important;
}

9. Multi level data structure verification of forms

<el-form :model="form">
  <el-form-item label="department" prop="dept"></el-form-item>
  <el-form-item label="full name" prop="user.name"></el-form-item>
</el-form>

rules: {
  'user.name': [{ required: true, message: 'Name cannot be empty', trigger: 'blur' }]
}

10. Table cross page multiple selection
You can see that some partners in the project manually add code to deal with this problem. In fact, according to the document, you only need to add row key and reserve selection.

<el-table row-key="id">
  <el-table-column type="selection" reserve-selection></el-table-column>
</el-table>
11,Highlight rows based on criteria and remove default hover colour
<el-table :row-class-name="tableRowClassName">
</el-table>

tableRowClassName({ row }) {
  return row.status === 2 ? 'highlight' : ''
}

// Set global
.el-table .highlight {
  background-color: #b6e8fe;
  &:hover > td {
    background-color: initial !important;
  }
  td {
    background-color: initial !important;
  }
}

12. What if the form does not want to display label but wants to display the required asterisk
//label just give a space

<el-form>
  <el-table>
    <el-table-column label="name">
      <template>
        <el-form-item label=" ">
           <el-input placeholder="Name cannot be empty" />
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
</el-form>

13. Invalid call to focus method for table inline input

<el-table>
  <el-table-column label="name">
    <template>
      <el-input ref="inputRef" />
    </template>
  </el-table-column>
</el-table>

// invalid
this.$refs['inputRef'].focus()
this.$refs['inputRef'][0].focus()
this.$refs['inputRef'].$el.children[0].focus()

// Effective
<el-input id="inputRef" />
document.getElementById('inputRef').focus()

14. El tree expand / collapse all nodes

<el-tree ref="tree"></el-tree>

expandTree(expand = true) {
  const nodes = this.$refs['tree'].store._getAllNodes()
  nodes.forEach(node => {
    node.expanded = expand
  })
}