This article has participated in the good article call order activity, click to view the back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Keep track of your daily development problems and their solutions.

If there is only one input below 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 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 the code

The last row of the fixed column in the table is not displayed completely

This is sometimes the case when the width is just at the critical state. Because the height of the fixed column is dynamically calculated independently of the body of the table, the height of the fixed column is less than the height of the table, which causes the last row to be blocked.

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

3. The Confirm event in the document bubble is invalid

Change the event names to Confirm and Cancel for ElementUI 2.14.0. If your version is younger than 2.14.0, remember to use onConfirm and onCancel.

// Change confirm to onConfirm<el-popover @onConfirm="">
</el-popover>
Copy the code

4. Input box is restricted with regular but 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 the code

The input box is displayed correctly, but the binding value is not updated. Change onKEYUp to onInput.

  • PS: After input Chinese, v-model will fail, the following way is better:
<el-input 
  v-model="form.retailMinOrder" 
  placeholder="Please enter" 
  @keyup.native="form.retailMinOrder=form.retailMinOrder.replace(/[^\d.]/g,'')"
/>
Copy the code

5, remove the up and down arrow in the type=”number” input box

/* 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 the code
<el-input type="number" class="clear-number-input" />
Copy the code

Verify only one field of the form

In some user registration scenarios, we sometimes verify some individual fields before submitting the entire form. For example, when sending the mobile phone verification code, we only need to verify the field of the mobile phone number. We can do this:

this.$refs['form'].validateField('mobile'.valid= > {
  if (valid) {
    // Send the verification code}})Copy the code

If you need more than one parameter, change the parameter to an array.

7. The last verification information of the form is not cleared when the popover is reopened

Some people reset the form in $nextTick when open, and I chose to reset it when closed.

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

// Resets the form when the popover closes
onClose() {
  this.$refs['form'].resetFields()
}
Copy the code

8, table head and content dislocation

There are other methods on the Internet, but I remember they didn’t work for me, so I went with this one:

// Global Settings.el-table--scrollable-y .el-table__body-wrapper {
 overflow-y: overlay ! important;
}
Copy the code

9, form multi-level data structure verification problem

<el-form :model="form">
  <el-form-item label="Department" prop="dept"></el-form-item>
  <el-form-item label="Name" prop="user.name"></el-form-item>
</el-form>
Copy the code
rules: {
  'user.name': [{ required: true.message: 'Name cannot be empty'.trigger: 'blur'}}]Copy the code

10. Select multiple tables across pages

You can see that some people in the project manually added code to deal with this problem, but according to the documentation, just add row-key and Reserve-selection.

<el-table row-key="id">
  <el-table-column type="selection" reserve-selection></el-table-column>
</el-table>
Copy the code

11. Highlight rows based on conditions 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; }}Copy the code

12. What if the form doesn’t want to display label but wants to display mandatory asterisks

// Give the label a space<el-form>
  <el-table>
    <el-table-column label="Name">
      <template>
        <el-form-item label="">
           <el-input placeholder="The name cannot be empty." />
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
</el-form>
Copy the code

Call to focus with input in table is invalid

<el-table>
  <el-table-column label="Name">
    <template>
      <el-input ref="inputRef" />
    </template>
  </el-table-column>
</el-table>/ / invalid enclosing $refs [' inputRef] focus () enclosing $refs [' inputRef] [0]. The focus () enclosing $refs [' inputRef] $el. Children [0]. The focus () / / effective<el-input id="inputRef" />
document.getElementById('inputRef').focus()
Copy the code

14, table content beyond omission

In fact, just add a “show-overflow-Tooltip” to it. It also comes with tooltip effect, isn’t it nice?

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

15. El-tree Expands/collapses 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 the code

16, el-popover position offset problem

Why it happened: The content in el-Popover is dynamically retrieved, so when it is opened, it is in the correct position. At this time, the content is empty. After the data is obtained and rendered, the size of the el-Popover content box changes, causing the position to be offset.

Solution: We know from the source code that el-popover has an updatePopper method to update the location (not in the documentation), so we just need to get the data and updatePopper again.

<el-popover ref="popover" placement="left" trigger="click">
</el-popover>
Copy the code
// After obtaining the data
this.$nextTick(() = > {
  this.$refs['popover'].updatePopper()
})
Copy the code

El-dialog has an invalid destroy-on-close attribute set

When the destruct-on-close is set to true, the DOM element is not destroyed after the popover closes.

Solution: Add v-if to el-Dialog.

<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close>
</el-dialog>
Copy the code

18. After selecting El-Cascader, you need to click the blank to close it

When the cascading selector is set to any optional level, you need to manually click the blank to close an option.

Solution: You can turn off the change event when it is triggered.

<el-cascader
  ref="cascader"
  @change="onChange"
/>
Copy the code
onChange() {
  this.$refs['cascader'].dropDownVisible = false
}
Copy the code

Use a picture viewer

The el-image component has a preview function. Just pass in the preview-src-list. But what if we don’t use the Image component and want to preview a larger image? How about clicking a button and having an image viewer pop up?

The answer is to use el-image-viewer, which is not in the documentation, but from looking at the source code, it is the component used to preview the images in El-Image.

<template>
  <div>
    <el-button @click="open">Open image 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>
Copy the code

To be continued, which day encountered what to update…