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

Detailed steps for using jib for docker deployment in Spring Cloud

Introduction to Jib Jib is a library developed by...

Detailed steps to install JDK and Tomcat in Linux environment

Table of contents 1. Install JDK Manual Installat...

Mysql implements null value first/last method example

Preface We already know that MySQL uses the SQL S...

Detailed explanation of samba + OPENldap to build a file sharing server

Here I use samba (file sharing service) v4.9.1 + ...

What we have to say about CSS absolute and relative

Written in the opening: Absolute said: "Rela...

A complete guide on how to query and delete duplicate records in MySQL

Preface This article mainly introduces the method...

Mysql implements regular clearing of old data in a table and retaining several pieces of data (recommended)

To achieve the following goals: Mysql database wi...

Learn the basics of nginx

Table of contents 1. What is nginx? 2. What can n...

How to handle token expiration in WeChat Mini Programs

Table of contents Conclusion first question Solut...

Two ways to implement square div using CSS

Goal: Create a square whose side length is equal ...

Several methods to execute sql files under mysql command line

Table of contents The first method: When the MySQ...

A Brief Analysis of the Differences between “:=” and “=” in MySQL

= Only when setting and updating does it have the...

How to design MySQL statistical data tables

Table of contents Is real-time update required? M...

React's method of realizing secondary linkage

This article shares the specific code of React to...

Docker+selenium method to realize automatic health reporting

This article takes the health reporting system of...