When doing background management, we use vue with element UI, axios plug-in for request method, because I need to get other values of the select ed options, so I need to pass in the object. Baidu has not read the documents of the drop-down box very carefully. Baidu has read several articles and has not understood their meaning. Then she goes to the documents and reads his attributes several times. Suddenly, inspiration comes to her, and she tries one or two times. Wow, this is the original way. It is true that she reads the books hundreds of times and sees her own meaning.

1. The select drop-down box in elementui is the object

• When the value in the select drop-down box passes in an object, the value selected in the drop-down box will be confused when you don't write the right attribute.

<template>
    <el-select v-model="seletedOption" value-key="name" style="width: 72%" placeholder="Please choose">
        <el-option
          v-for="item in options"
          :key="item.express"
          :value="item"
          :label="item.name"
        ></el-option>
    </el-select>
</template>
<script>
export default{
    data() {
        return {
            selectedOption: '',
            options: [
                {
                    id: 0,
                    name: '11',
                    title: 'one'
                },
                {
                    id: 1,
                    name: '22',
                    title: 'two'
                }
            ]
        }
    }
}
</script>

• The drop-down box in the official website has the property of writing, read it several times, and new discoveries are made.

This value-key refers to the key value you want to render or select in the object, which is written to death directly. For example, I want to render the value corresponding to the name here. When I did not set the value-key attribute, but directly passed it to the value in the el-option as the object, I found that even if the selectedOption was empty, he would There are also display values on the page

2. Capturing exception information in Axios

• At first, I printed err directly, and found that the information he printed did not have the error information I wanted. It was all js file options.

• But when you print err.response, you will have the information you want.

.catch(err => {
  console.log(err);
  console.log(err.response);
})

3. Layout of custom modal boxes

• I've written custom modal boxes before, but there are some flaws. I didn't modify them. Recently, I looked at the dialog box of elementUI, and finally found out the cause of the flaw.
• When you customize the modal box, there will be a translucent shadow layer on the outer layer. I use flex layout for the horizontal and vertical center of the content inside. But after using the translucent layer, after f12 in the browser, and then keep the page small, you will find that the content of the modal box is blocked, even if there is a roll. Move bar, also can't slide to fully see the content of the modal box
• So using the dialog box in elementui for reference, you can't use flex layout

/* Outermost layer */
.customModal{
  position: fixed;
  overflow-y: scroll;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 1000;
}
/* Content layer */
.modal{
  position: relative;
  margin: 15vh auto 50px;
  width: 600px;
  min-height: 242px;
  background: #fff;
  border-radius: 3px;
}

4.js timestamp

/* new Date()Get the timestamp in milliseconds, and I return it in seconds in the background. */
let time = Math.floor(new Date() / 1000);

5. Using el-cascader cascade selector in elementUI to realize address cascade selection

• el-cascader can realize cascade selection of secondary or tertiary addresses
• First install element-china-area-data using npm element-china-area-data
• Then we introduce json data

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

Provce AndCityData is the second cascade of provincial and municipal mobile data (without the "all" option)
regionData is the three-level linkage data of provinces and municipalities (without the "all" option)
Provce AndCityDataPlus is the three-level linkage data of provinces and cities (with the "all" option)
regionDataPlus is the three-level linkage data of provinces and municipalities (with the "all" option)
The value of the "All" option binding is an empty string.
CodeToText is a large object, the attribute is a region code, and the attribute value is the usage of Chinese characters, such as: CodeToText['110000'] exported to Beijing.
TextToCode is a large object, the attribute is Chinese characters, and the attribute value is the usage of area code, such as: TextToCode ['Beijing']. Code output 110000,TextToCode'Beijing'. Code output 110100,TextToCode'Beijing'['Chaoyang District']. Code output 110105.

• Use, I'm here to achieve address secondary selection

<template>
  <el-cascader
      style="width: 68%"
      size="large"
      :options="options"
      v-model="selectedCity"
      placeholder="Please select the area"
  ></el-cascader>
</template>
<script>
  import { provinceAndCityData,CodeToText } from 'element-china-area-data'
  export default{
    data() {
      return {
        options: provinceAndCityData,
        selectedCity: [],
      }
    },
    method: {
      handleSelected() {
        /* Here he returns the selected number, which needs to be transcribed. */
        console.log(CodeToText[this.selectedCity[0]]);
      }
    }
  }
</script>

In the process of studying hard, if it is helpful to your study, leave your mark.

• Recommendations:

  • Achieving single-line and multi-line text with ellipsis after exceeding
  • Judging iOS, Android and PC
  • Using vue to develop mobile management background
  • Draw a triangle