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="number">
    <el-input
      v-model="query.orderNo"
      :placeholder="Enter number"
      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

Reason: this occurs when the width is just at the critical value. Because the fixed column dynamically calculates the height independently of the table body, when the fixed column height is less than the table height, the last row will be blocked.

The problems solved are as follows:

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

　　

3, The confirm event in the bubble confirmation box document does not take effect

Reason: Version: element UI: "2.13.2", vue: "2.6.10"

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

　　

IV. the input box is restricted by regular, but the binding value is not updated.

Look at the following code:

<el-input 
  v-model="form.num" 
  placeholder="Please enter"
  onkeyup="value=value.replace(/[^\d.]/g,'')" 
/>

In this way, although the display of the input box is correct, the bound value is not updated. Just change onkeyup to oninput. Since the v-model will fail after inputting Chinese, it will be further improved

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

　　

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

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

/* 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;
}

　　

6, Verify only one field of the form

In some scenarios, when submitting the whole form, we will check some individual fields, 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 you need more than one parameter, change the parameter to array form.

7, When the pop-up window is reopened, the last verification information of the form is not cleared.

Reason: sometimes I reset the form in $nextTick when I open, but I choose to reset it when I close.

<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

 

// 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" :rules="rules">

  <el-form-item label="company" prop="company"></el-form-item>
  <el-form-item label="full name" prop="user.name"></el-form-item>
</el-form>

Check

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

　　

10, Multiple choices across pages of the table.

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 the row according to the condition and remove the default hover color

　

<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, If the form does not want to display label but wants to display the required asterisk, how to add a space.

 

// label just give a space
<el-form>
  <el-table>
    <el-table-column label="number">
      <template>
        <el-form-item label=" ">
           <el-input placeholder="Number cannot be empty" />
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
</el-form>

 

　　

13, Invalid call to focus method for table embedded input.

 

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

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

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

14, The contents of the table are omitted.

Add show overflow tooltip to each line to create bubbles that are out of range.

 

<el-table-column label="Customer name" prop="customerName" show-overflow-tooltip>
</el-table-column>

 

　　

15, El tree expand / collapse all nodes

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

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

　　

To be updated.......................