[Front-end Series] Element-UI Enlightenment

Welcome to my blog, I’m glad to meet you here! I hope you can feel a relaxed and pleasant atmosphere here, where you can not only obtain interesting content and knowledge, but also speak freely and share your thoughts and insights. Recommended: kwan’s homepage, keep learning, keep summarizing, make progress together, live and learn Navigation […]

How Vue+Element-UI displays data in Json files

In the process of writing code today, I want to read the province, city, and district information from the Json file and display it in the drop-down box respectively, so I want to share my writing process and better implementation method. 1 Idea 1 json data: [ { “zoneId”: 459, “code”: “210000”, “parentId”: “0”, “name”: […]

element-ui tree form multiple selection

As mentioned, element-ui version 2.13.2 supports tree structure tabs and multi-level folding display. But there is no multi-select + tree tab. It must be implemented when business requirements are met. The operation is to check data editing. Here we can use two events to achieve: @select: The user selects a row to trigger the event. […]

element-ui form verification? encyclopedia

Directory 1. Verification of all form items 2. Verify the specified fields 3. Custom function verification form 4. Verification of multiple input boxes in one line element-ui official website The rules for element-ui form verification are as follows: <property name>: [ {<!– –> required: true, // Whether it is required (if there is a label, […]

element-ui left navigation bar component

The layout of the left navigation bar of element-ui is implemented, the effect is as follows Components involved: App.vue Router.js layout.vue: nav.vue (left navigation area, containing loop widget asideBarItem.vue), AppMain.vue (right main content area) The project structure is as follows: ? 1. App.vue, controls the rendering of the page through router routing, very simple, a […]

Element-UI + Vue2 Migrate from Vue-cli to Vite

One: Delete related dependencies in the package.json file 1: Delete vue-cli related dependencies “@vue/cli-plugin-babel”: “~4.5.0”, “@vue/cli-plugin-eslint”: “~4.5.0”, “@vue/cli-service”: “~4.5.0”, 2: Delete babel related dependencies “babel-eslint”: “^10.1.0”, “babel-plugin-component”: “^1.1.1”, “babel-plugin-lodash”: “^3.3.4”, “@babel/plugin-syntax-dynamic-import”: “^7.8.3”, “@vue/babel-helper-vue-jsx-merge-props”: “^1.2.1”, “@vue/babel-preset-jsx”: “^1.2.4”, 3: Delete webpack related dependencies “hard-source-webpack-plugin”: “^0.13.1”, “compression-webpack-plugin”: “^6.1.1”, “lodash-webpack-plugin”: “^0.11.6”, “webpack-bundle-analyzer”: “^4.4.2” “webpack-cli”: “^4.3.0” Two: Install pnpm pnpm […]

Element-ui time picker shortcut key selection settings

1. Display the picture 2. Upload the code pickerOptions: { shortcuts: [ { text: “Today”, onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() – 3600 * 1000 * 24 * 0); picker.$emit(“pick”, [start, end]); }, }, { text: “yesterday”, onClick(picker) { const end = new Date(); const start = new […]

vue+element-ui carousel carousel (display) 5 pictures at a time

Achieve the following effect Define subcomponent Swiper.vue <template> <div v-show=”ready” class=”el-carousel__item” :class=”{ ‘is-active’: active, ‘el-carousel__item–card’: $parent.type === ‘card’, ‘is-in-stage’: inStage, ‘is-hover’: hover, ‘is-animating’: animating }” @click=”handleItemClick” :style=”itemStyle”> <!– <div v-if=”$parent.type === ‘card'” v-show=”!active” class=”el-carousel__mask”> </div> –> <slot></slot> </div> </template> <script> import { autoprefixer } from ‘element-ui/src/utils/util’; const CARD_SCALE = 0.83; const CARD_SCALE2 = 0.7; export […]

Encapsulate an Element-ui to generate a table that can be edited within (vue2 project)

This encapsulates a table that is used by the entire project and can be reused multiple times. It is placed under a common component file for global use. General function introduction, encapsulate custom instructions, click to get focus, display input box, lose focus to display text content, the type is determined by a dictionary, the […]

Using ECharts in Vue3 Element-UI (front-end data display development)

There are many tools available for front-end data display (data visualization, data big screen, etc.). Many third parties provide online platforms, such as Alibaba Cloud. You only need a data interface and configure the interface online to use it. Use of Alibaba Cloud: Using Alibaba Cloud Internet of Things Platform (IoT) to realize WEB data […]