A list of ElementUI issues

Posted by evmace on Thu, 23 Dec 2021 15:21:28 +0100

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

ElementUI 2.14. The event name of version 0 is changed to confirm and cancel. If your version is lower than 2.14 0. Remember to use onConfirm and onCancel.

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

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,'')" 
/>

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,'')"
/>

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 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. 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. 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>

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
  })
}

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>

Author: at 4 a.m. on the 8th
Link: https://juejin.cn/post/6981083988286767117
Source: Nuggets
The copyright belongs to the author. For commercial reprint, please contact the author for authorization, and for non-commercial reprint, please indicate the source.

Topics: html5 html elementUI

Hot Topics

©2024 Programmer Think