Creating a global component
let div = document.createElement('div');
document.body.appendChild(div);
Copy the codeCreate a div, insert it into the body, and pass in the property and the look of the component you want to write via the ReactDOM, as in
ReactDOM.render(React.createElement(Loading, props), div); Finally, destroy it when you don’t need it, as in
ReactDOM.unmountComponentAtNode(div);
document.body.removeChild(div);
Copy the codeThe el-Table tree structure sets the default expanded rows
Default expansion problem for elementUi Table -CSDN community
The el-Table tree must be aligned to the left; otherwise, the hierarchy cannot be seen clearly
The TreesELECT component searches remotely to edit the issue of unrendering content unknown, sets the default value, and defines hack Boolean values for re-rendering
this.backFillOptions = [
{ id: res.companyInfo.companyName,
label: res.companyInfo.companyName,
} ]
this.hack =! this.hack
<treeselect
v-if="hack"
key="t1"
v-model="companyName"
:async="true"
searchPromptText="Enter search"
:default-options="backFillOptions"
:load-options="loadOptions"
placeholder="Enter search and select business division name"
@select="changeCompanyName" />
<treeselect
v-else
key="t2"
v-model="companyName"
:async="true"
searchPromptText="Enter search"
:default-options="backFillOptions"
:load-options="loadOptions"
placeholder="Enter search and select business division name"
@select="changeCompanyName" />
Copy the codeProperties of vUE objects are not initialized and assignments do not respond (will not be listened on)
El-upload Custom upload
-
No submit button: :http-request=”httpRequest” User-defined httpRequest function
-
:auto-upload=”false” With submit button: Trigger custom request interface when submit button
Set FormData to {} when uploading, and use axios directly will not succeed, only the public interface that uses AXIos intercepts will work
You can’t print directly, so use FormData’s get() and getAll() methods
Verify multiple subforms at the same time, any one not filled will show an error, use custom checksum
var checkWater = (rule, value, callback) = > {
let waterMid = this.$refs.waterMid.value;
let waterUpper = this.$refs.waterUpper.value;
if( value && waterMid && waterUpper ){
callback()
} else if(!this.form.waterDifference) {
callback()
}else {
callback(new Error('Please fill in the threshold range'))}}Copy the codeEl-select linkage does not clear errors, but manually clearValidate; $forceUpdate is required if the link is not selected
this.$refs.form.clearValidate('departmentId')
Copy the codeEl-tree can only be dragged at the same level using allow-drop = allowDrop
Copy the codeEl-date-time-picker sets an optional time range accurate to seconds. SelectableRange is required
let str = '12:12:12'
let pickOptions = {
disableDate: (time) = >{
return time.getTime() > Date.now()
},
selectableRange: str + '- 23:59:59'} you can set STR, which is the critical starting position, and the value before it is not selectableCopy the codeThe download file
ResponseType: ‘blob’
Too much element el-select data causes stalling
Solution: Use lazy loading
<template>
<div class="flex-between-center edit-row" >
<el-select v-model="choose" placeholder="Please select" filterable
v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)" size="small"
@change="handleMachineChange"
style="width: 280px"
:filter-method="filterMethod">
<el-option
v-for="(item, index) in finalList"
:label="`${item.machineNo} (${item.machineName})`"
:value="item.machineNo"
:key="index">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
// model: {
// prop: 'choose',
// event: 'change'
// },
props: {machineList: {
type: Array.default: () = >[]},value: {
type: String.default: ' '}},watch: {
value(newVal){
this.choose = newVal
},
choose(newVal,oldVal){
this.$emit("input".this.choose)
},
// Execute twice because requested twice. There are thousands of machineList
machineList: {handler(){
this.currentList = []
/ / copy
this.currentList = this.machineList.slice(0)
this.handleList()
},
immediate: true ,
deep: true}},directives: {
'el-select-loadmore': {bind(el, binding){
const selectDom = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
if(selectDom){
selectDom.addEventListener("scroll".function(){
// const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
// There are no conditions
// if(condition) binding.value()
binding.value()
})
}
}
}
},
computed: {
finalList(){
return this.currentList.slice(0.this.rangeNumber)
}
},
data(){
return {
currentList: [].rangeNumber: 10.choose: this.value
}
},
mounted(){// Do not execute},
methods: {filterMethod(val){
if(val){
this.currentList = this.machineList.filter((item) = >{
if(item.machineNo.includes(val) || item.machineName.includes(val)){
return item
}
})
}else{
this.currentList = this.machineList
}
},
handleList(){
let index0 = -1
let item0 = this.currentList.find((item, index) = >{
if(item.machineNo == this.choose) {
index0 = index
}
return item.machineNo == this.choose
})
// Modify: Before presentation, loop the total data to the top of the list
if(index0 > 0) {this.currentList.splice(index0,1)
this.currentList.splice(0.0, item0)
}
},
loadMore(n){
return () = > this.rangeNumber +=5
},
handleMachineChange(e){
this.$emit('change'.this.choose)
}
}
}
</script>
Copy the codeEl-input listens for paste events
el-input v-model="val" placeholder="Please enter the content" @paste.native.capture.prevent="handlePaste"/>
// Get the pasted value
let clip = e.clipboardData.getData('Text')
this.val = clip
Copy the codeMap traversal is asynchronous
async handleQrCode (ids) {
...
let promises = list.map(async (item, i) => {
return {
...item,
equipQrcodePath: (images[i]),
equipQrcodeFullPath: await formatFileUrl(images[i]),
}
})
this.qrCodeEquips = await Promise.all(promises);
}
Copy the codeForEach traversing asynchronous is replaced with a for loop traversing asynchronous
async handleQrCode (ids) {
...
if(files && files.length>0) {for(let item of files) {
item.fullPath = awaitformatFileUrl(item.path); }}}Copy the codeTo use button in a form, you must set type=button otherwise it will jump
Implement FIXED positioning relative to the parent element using position:relative and Absolute
You want a particular child element to be “fixed” relative to its parent, that is, the rest of the child elements are not fixed. If you add assistor, you have two ancestor elements: one to assist positioning and one to wrap unpositioned content.
As long as assistor is the same size as parent, it looks like the child is positioned relative to the parent.
<div class="assistor">
<div class="parent">
<div class="child"></div>
<div class="placeholder"></div>
</div>
</div>
Copy the code.assistor {
position: relative; /* Key points */
display: block;
width: 500px;
height: 300px;
margin: 100px auto 0 auto;
background-color: #ddd;
}
.parent {
width: 500px;
height: 300px;
background-color: #888;
overflow: auto; /* Key points */
}
.child {
position: absolute; /* Key points */
width: 120px;
height: 120px;
margin: 100px 50px;
background-color: #333;
}
.placeholder {
width: 1000px;
height: 1000px;
}
Copy the codeSmall program step pit
Small program step pit record