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. Just add @ submit.native.prevent to the El form.
<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>
Copy code
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;
}
Copy code
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)"
Copy code
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"
onkeyup="value=value.replace(/[^\d.]/g,'')"
/>
Copy code
In this way, although the display of the input box is correct, the bound value is not updated. Just change onkeyup to oninput.
- PS: corrected by the brother in the comment area, the v-model will be invalid after entering Chinese. The following method is better:
<el-input
v-model="form.retailMinOrder"
placeholder="Please enter"
@keyup.native="form.retailMinOrder=form.retailMinOrder.replace(/[^\d.]/g,'')"
/>
Copy code
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;
}
Copy code
<el-input type="number" class="clear-number-input" />
Copy code
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
}
})
Copy 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()
}
Copy code
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;
}
Copy code
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>
Copy code
rules: {
'user.name': [{ required: true, message: 'Name cannot be empty', trigger: 'blur' }]
}
Copy code
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>
Copy code
11. Highlight rows based on criteria 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 {
#b6e8fe;
&:hover > td {
initial !important;
}
td {
initial !important;
}
}
Copy code
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>
Copy code
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()
Copy code
14. Table content exceeded and omitted
Seeing a small partner manually adding CSS to the code is another negative example of not looking at the document. In fact, just add a show overflow tooltip and bring its own tooltip effect. Isn't it fragrant?
<el-table-column label="Customer name" prop="customerName" show-overflow-tooltip>
</el-table-column>
Copy code
15. 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
})
}
Copy code
16. El Popover position offset problem
Cause: the content in El Popover is obtained dynamically, so the position is correct when it is first opened. At this time, the content is empty. After the obtained data is rendered, the size of the El Popover content box changes, resulting in position offset.
Solution: through the source code, we know that there is an updatePopper method in El Popover to update the location (not in the document), so we just need to re updatePopper after obtaining the data.
<el-popover ref="popover" placement="left" trigger="click">
</el-popover>
// After data acquisition
this.$nextTick(() => {
this.$refs['popover'].updatePopper()
})
17. The destroy on close property setting of El dialog is invalid
When destroy on close is set to true, it is found that the DOM element is still after the pop-up window is closed and has not been destroyed.
Solution: add v-if on El dialog.
<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close>
</el-dialog>
18. After selecting El cascade, you need to click the blank space to close it
When the cascade selector is set to any optional level, you need to manually click the blank space to close when selecting an option.
Solution: you can close the change event when it is triggered.
<el-cascader
ref="cascader"
@change="onChange"
/>
onChange() {
this.$refs['cascader'].dropDownVisible = false
}19. Using the picture viewer
The El image component has its own image preview function. Just pass in preview SRC list. But sometimes we don't use the image component, but we want to preview the large picture. What should we do? For example, click a button to pop up a picture viewer?
The answer is to use El image viewer. This component is not in the document, but you can see from the source code that this component is used for previewing pictures in El image.
<template>
<div>
<el-button @click="open">Open picture preview</el-button>
<el-image-viewer
v-if="show"
:on-close="onClose"
:url-list="urls"
:initial-index="initialIndex"
/>
</div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
components: {
ElImageViewer
},
data() {
return {
show: false,
urls: ['https://img0.baidu.com/it/u=391928341,1475664833&fm=26&fmt=auto&gp=0.jpg'],
initialIndex: 0
}
},
methods: {
open() {
this.show = true
},
onClose() {
this.show = false
}
}
}
</script>
To be continued, update what you encounter one day...