1. Implement functions (1) Custom fixed position: fixed at the beginning of the column, fixed at the end of the column, not fixed (2) Flexibly control the display and hiding of columns (3) Reset 2. Ideas Data transfer Data passed by the parent component to the child component: all column data Data passed by the […]
Tag: Element-UI
element-ui offline document production
Step 1: Clone the source code Gitee address: https://gitee.com/ElemeFE/element.git GitHub address: https://github.com/ElemeFE/element.git # Code clone (requires local git environment) git clone element-ui code address Step 2: Packaging View the package.json file and find the scripts node. This node is used to specify script commands for npm to call directly. In script< If you find the […]
Use vue3+element-ui plus to quickly build background management templates
1. Install vue3 scaffolding npm create vue@latest cd vue-ui-template #Switch to the root directory of the vue project you just created npm install #Download the dependency packages required for the project npm run dev #Start running project service After the project is started, the default page displays as follows: 2. Install element-ui plus Official website […]
Element-ui el-table uses SortableJS to implement table drag and drop
sortablejs documentation 1. Install sortablejs in the project directory: npm install sortablejs –save 2. Introduce sortablejs into the file where you want to implement table drag and drop: import Sortable from ‘sortablejs’ 3. Application <template> <el-table :data=”tableData”> <el-table-column label=”UserId” prop=”id” align=”center” /> <el-table-column label=”username” prop=”username” align=”center” /> </el-table> </template> <script> import Sortable from “sortablejs”; export […]
Element-ui el-table component is selected and echoed
During development, I used the table component of Element-ui for development. I encountered the need for component echo. Let me briefly record it. Demo Directly upload the code <template> <el-table ref=”multipleTable” :data=”tableData” tooltip-effect=”dark” style=”width: 100%” :row-key=”(row) => row.id” @selection-change=”handleSelectionChange” > <el-table-column type=”selection” :reserve-selection=”true” width=”55″></el-table-column> <el-table-column prop=”id” label=”id” width=”120″></el-table-column> <el-table-column prop=”name” label=”name” width=”120″></el-table-column> <el-table-column prop=”address” label=”address” […]
The VUE framework introduces Element-UI to achieve front-end effects——VUE framework
<template> <!– <div id=”app”> <img alt=”Vue logo” src=”./assets/logo.png”> <HelloWorld msg=”Welcome to Your Vue.js App”/> </div> –> <div id=”app”> <Movie v-for=”movie in movies” :key=”movie.id” :title=”movie.title” :rating=”movie.rating”></Movie> <Hello></Hello> </div> </template> <script> // import HelloWorld from ‘./components/HelloWorld.vue’ import Movie from ‘./components/Movie.vue’ import Hello from ‘./components/Hello.vue’ Movie,name export default { name: ‘App’, data:function(){ return{ movies:[ {id:1,title:”Wolverine”,rating:8.7}, {id:1,title:”Wolverine”,rating:8.8}, {id:1,title:”Wolverine”,rating:8.6} ] […]
Element-UIMock.js, case home page navigation, left menu
一.Mock.js 1. What is Mock.js Mock.js is a JavaScript library for generating mock data. It can simulate the back-end API interface and be used for interface debugging and testing during front-end development to improve the efficiency of automated testing. Using Mock.js, you can quickly create virtual data, and set the data type, format, and rules […]
[Element-UI] Realize dynamic tree, data table and paging effects
1. Introduction 1. Introduction In modern software development, dynamic trees, data tables and pagination effects have become the core requirements of many applications. As business scale and complexity increase, we often need to display a large amount of hierarchical structure data and implement highly interactive and efficient operations. Dynamic trees provide a clearly organized and […]
[Element-UI] CUD (add, delete, modify) and form form verification (source code attached)
Table of Contents 1. Introduction 1 Introduction 2. Function 2. CUD 1. Add modifications 1.1. Add pop-up window 1.2. Define variables 1.3. Definition method 1.4. Complete code 2. Delete 2.1. Definition method 3. Form verification 1. Add rules 2. Define rules 3. Submit event 4. Complete front-end code 1. Introduction 1. Introduction Add, delete, and […]
Element-ui of Mock.js builds homepage navigation and left menu
Yanyanye: Personal homepage Personal column: “Integration of Spring and Mybatis” “Usage of springMvc” The ideal of life, in order to constantly renew yourself! 1. Use of Mock.js 1.1.What is Mock.js Mock.js is a simulation data generator that is used to help front-end debugging and development, separate front-end and back-end prototypes, and improve automated testing efficiency. […]