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

vue-router history mode server-side configuration process record

history route History mode refers to the mode of ...

Solve the problem of IDEA configuring tomcat startup error

The following two errors were encountered when co...

Detailed explanation of Vue development website SEO optimization method

Because the data binding mechanism of Vue and oth...

Detailed explanation of the problem of mixed use of limit and sum functions in MySQL

Preface Today, after synchronizing the order data...

JavaScript+html to implement front-end page sliding verification (2)

This article example shares the specific code of ...

CSS achieves the effect of aligning multiple elements at both ends in a box

The arrangement layout of aligning the two ends o...

A simple way to achieve scrolling effect with HTML tag marquee (must read)

The automatic scrolling effect of the page can be...

Mysql experiment: using explain to analyze the trend of indexes

Overview Indexing is a skill that must be mastere...

How to clear default styles and set common styles in CSS

CSS Clear Default Styles The usual clear default ...

How to distribute two buttons on the left and right sides of the same parent tag using CSS

This article mainly introduces the method of CSS ...

Detailed explanation of the processing of the three Docker Nginx Logs

Because colleagues in the company need Nginx log ...

Detailed explanation of Linux text processing tools

1. Count the number of users whose default shell ...

Tutorial on using Docker Compose to build Confluence

This article uses the "Attribution 4.0 Inter...

Detailed explanation of the idea of ​​setting up login verification interception function in Vue

Table of contents 1. Solution 2. Let the browser ...

Detailed explanation of a method to rename procedure in MYSQL

Recently I have used the function of renaming sto...