Summarize the problems encountered in using Vue Element UI

Summarize the problems encountered in using Vue Element UI

The element-ui framework based on vue2.0 is very convenient to use and very suitable for rapid development. However, you will still encounter various problems when doing your own projects. The official documentation for some problems is not very detailed. The following are some notes on some common problems or problems I encountered when using element-ui.

1. DateTimePicker date selection range is the current time and before the current time

<template>
    <div>
        <el-date-picker
            size="small"
            clearable
            :picker-options="pickerOptions"
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="to"
            start-placeholder="start date"
            end-placeholder="end date"></el-date-picker>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                pickerOptions: {
                    disabledDate (time) {
                        return time.getTime() > Date.now()
                    }
                },
                dateRange: []
            }
        }
    }
</script>

There is another situation where you can only select the time after the current time, including hours, minutes and seconds. If the selected time is less than the current time, it will be automatically filled with the current hours, minutes and seconds. At this time, you can use watch to monitor properties or events to handle it.

<template>
    <div>
        <el-date-picker size="small" clearable type="daterange" v-model="dateRange"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            range-separator="to"
            start-placeholder="start date"
            end-placeholder="end date"></el-date-picker>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                pickerOptions: {
                    disabledDate (time) {
                        return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
                    }
                },
                dateRange: []
            }
        },
        watch:
            dateRange (val) { //This can also be replaced with a change event var st = new Date(val) * 1000 / 1000
                if (st < Date.now()) {
                    this.dateRange = new Date()
                }
            }
        }
    }
</script>

2. Splitting of DateTimePicker date selection range array

Requirements encountered in the project: The value date bound to the date picker of type daterange is an array, but the start date and end date parameters received by the backend are separate, and the data returned during echo is also separate

Create arrayUtil.js file

// arrayUtil.js
/**
 * @description Safely obtain the index data corresponding to the array* @param { Array } arr
 * @param { int } index
 */
export const saveGet = (arr, index) => {
    if(arr & Array.isArray(arr)) {
        return arr[index];
    } else {
        return undefined;
    }
}

Import and call in .vue file

// .vue fileimport { saveGet } from './utils/arrayUtil';

<el-date-picker 
    type="daterange" 
    v-model="date" 
    value-format="yyyy-mm-dd" 
    format="yyyy-mm-dd" 
    start-placeholder="start date" 
    end-placeholder="end date" 
    style="width: 100%;"></el-date-picker>

export default {
    data() {
        return {
            date: [] // date range}
    },
    // Calculate the parameters passed to the backend (split date range array)
    computed: {
        queryParams() {
            return {
                ... ...
                fromDate: saveGet(this.form.date, 0),
                toDate: saveGet(this.form,date, 1),
                ... ...
            };
        }
    },
}

When echoing, just piece together the fromDate and toDate returned by the backend into an array.

3. The value/label of el-select selector options is spliced

<el-select placeholder="Please select" style="width:100%" filterable v-model="info" clearable >
    <el-option
      v-for="item in infoList"
      :key="info.id"
      :label="`name: ${item.name} - idNo: ${item.idNo}`"
      :value="item.id">
      <span style="float: left">{{ item.tableName }}</span>
      {{ item.level }}</span>
    </el-option>
</el-select>

The above v-model="info" is the selected user id returned from the backend, infoList is the information of all users, label is the concatenation of user name - user idNo. When echoing, just match and filter and then concatenate and display.

The display is as follows:

4. el-dialog parent-child component transfers value, and an error occurs when closing el-dialog

When encapsulating el-dialog for the second time, the following error occurs when closing the dialog

The specific code is as follows:

// Parent component <el-button type="primary" size="mini" @click="dialogVisible=true">Add</el-button>
<com-dialog :dialogVisible.sync="dialogVisible" @closeDialog="closeDialog"></com-dialog>

// Subcomponent <template>
    <el-dialog title="New" :visible.sync="dialogVisible" @close="closeDialog">
</template>

<script>
export default {
  props: {
      dialogVisible: {
          type: Boolean,
          default: false
      }
  },
  methods:{
      //Close Dialog
      closeDialog(){
        this.$emit('update:closeDialog', false);
      }
  },
};
</script>

The reason for the error is that the closing event of the child component conflicts with the closing event of the parent component. The props property of the child component must be controlled by the parent component, and the value of visible cannot be modified directly. The sync modifier here is equivalent to el-dialog directly modifying the value of the parent component. So just remove the .sync of the parent component and the child component.

Another way is to change the close method to before-close. The specific code is as follows:

// Parent component <el-button type="primary" size="mini" @click="dialogVisible=true">Add</el-button>
<com-dialog :dialogVisible.sync="dialogVisible" @closeDialog="closeDialog"></com-dialog>

// Subcomponent <template>
    <el-dialog title="New" :visible.sync="dialogVisible" :before-close="closeDialog">
</template>

<script>
export default {
  props: {
      dialogVisible: {
          type: Boolean,
          default: false
      }
  },
  methods:{
      //Close Dialog
      closeDialog(){
        this.$emit('closeDialog', false);
      }
  },
};
</script>

5. el-form-item label customization

It is required to add prompt text in the label of the form. The specific display requirements are as follows:

In the API documentation, the form-item slot has a label attribute, which is used to customize the content of the label text. The implementation is as follows:

<el-form-item prop="name">
    <span slot="label">
        Username<i>(Alphabets, numbers and special characters are supported)</i>
    </span>
    <el-input v-model="name"></el-input>
</el-form-item>

Then modify the font and color according to the style.

6. el-input uses clearable to clear content and triggers verification prompt

The el-input of the form has input validation, and the trigger mode is blur. If clearable is used to clear the content, the validation prompt will not be triggered. The document provides a focus() method for el-input, which is called when clearing the content. When the focus is lost, verification is triggered. The specific implementation is as follows:

<el-input placeholder="Please enter" v-model="form.name" clearable ref="nameRef" @clear="clearInput('nameRef')"></el-input>
                             
// Clear form content event clearInput (refName) {
    this.$refs[refName].focus()
}

The above is a detailed summary of the problems encountered in the use of Vue Element UI. For more information about Vue Element UI, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Solve the triggering problem of change event when vue elementUI uses el-select
  • Vue uses the table in ant design to trigger the event operation when clicking a row
  • Solve the problem of using elementUi packaging error in vue2
  • Vue triggers twice in the native event of antDesign framework or elementUI framework component

<<:  The difference between MySQL database host 127.0.0.1 and localhost

>>:  Nginx merges request connections and speeds up website access examples

Recommend

Analysis and solution of the reason why overflow-y: visible; does not work in CSS

Scenario A recent requirement is an h5 page for m...

MySQL uses init-connect to increase the implementation of access audit function

The mysql connection must first be initialized th...

Implementation of element input box automatically getting focus

When making a form in a recent project, I need to...

Detailed steps to build an independent mail server on Centos7.9

Table of contents Preface 1. Configure intranet D...

Detailed explanation of various types of image formats such as JPG, GIF and PNG

Everyone knows that images on web pages are genera...

How to build svn server in linux

1: Install SVN yum install -y subversion 2. Creat...

Navigation Design and Information Architecture

<br />Most of the time when we talk about na...

How to install MySQL 8.0.13 in Alibaba Cloud CentOS 7

1. Download the MySQL installation package (there...

Mysql8.0 uses window functions to solve sorting problems

Introduction to MySQL Window Functions MySQL has ...

Multiple ways to change the SELECT options in an HTML drop-down box

After the form is submitted, the returned HTML pag...

Detailed explanation of MySQL's FreeList mechanism

1. Introduction After MySQL is started, BufferPoo...

CSS achieves the effect of hiding the scroll bar and scrolling the content (three ways)

We often encounter this situation in front-end de...

Application scenarios and design methods of MySQL table and database sharding

Many friends have asked in forums and message are...

Docker Compose network settings explained

Basic Concepts By default, Compose creates a netw...

Summary of the minesweeping project implemented in JS

This article shares the summary of the JS mineswe...