概念：虚拟dom相当于在js和真实的dom中间加了一个缓存，利用dom 的diff算法避免了没有必要的dom操作，从而提高了性能。为什么一定要用虚拟dom？ 你用传统的原生api或jquery去操作dom时，浏览器会从构建dom树开始，从头到尾执行一遍流程。真实dom的执行流程：用js对象表示真实的dom结构，当状态发生变化的时候，会重新创建一
转载
2024-09-24 14:38:24
45阅读
模拟后端返回数据 通过函数返回promise模拟后端返回的数据,并获取数据。里面的findFirstLevel函数是寻找表格的顶级节点的函数，文章后面会对它做详细介绍。const getData_imitate = (): Promise<tableItem[]> => {
return new Promise(function (resolve, reject) {
初次探索什么是虚拟dom
Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。请仔细看这行代码：return createElement('h1', this.blogTitle)
复制代码createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲
转载
2024-09-11 11:09:33
116阅读
元素属性说明元素属性说明clientWidth获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域。clientHeight获取元素可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域。offsetWidth元素在页面中占据的宽度总和
npm install el-tree-transfer --save<template>
<div>
<tree-transfer
:title="title"
:from_data="fromData"
:to_data="toData"
:defaultProps="{ labe
最近前后端分离大行其道，苦了后端人员，需要学习的东西还不少。于是到网上看了看前端的教程。没想到前端发展到今天变得如此复杂。前端也包括权限和路由的东西。不过整体看上去似曾相识，只是需要熟悉些新的语法。昨天晚上试用了一下element ui。感觉这个框架还是不错的。学了vue，再也不想用jQuery了。不再直接操作dom，而是跟数据打交道。今后打算好好学习下vue，网上做出来的后端框架还是不少的。下面
## Element Plus虚拟化表格原理详解及代码示例
在前端开发中，数据表格是一个常见的组件，用于展示大量数据。然而，当数据量过大时，传统的渲染方式会导致页面性能下降，甚至出现卡顿的情况。为了解决这个问题，Element Plus引入了虚拟化技术，来优化大型数据表格的性能。
### 什么是虚拟化表格？
虚拟化表格是一种通过动态加载数据来实现快速渲染大型数据集的技术。它只会渲染可见区域内
原创
2024-05-27 05:48:33
832阅读
技术概述虚拟列表（VirtualList）是一种在展示大量数据（长列表）时使用的插件，通过只显示必要的DOM和无限滚动，提升页面的性能。在web环境中，我们可以使用vue-virtual-scroll-list之类的npm包。最近热门的小程序框架Taro3也提供了这个能力。从文档说明上看，其功能算是vue-virtual-scroll-list的一个子集。技术详述在Taro中使用VirtualLi
转载
2024-07-17 00:34:13
423阅读
上一篇文章完成了Router4.0的集成，已经页面的切换。那么就应该开始对每个页面的内容做设计了，vue有很很多支持的第三方UI库，其中使用最广泛的就是 elementUI 。这次 elementUI 的集成为了适配我们Vue3.0特地选择了官方对应的版本 element-plus 。安装首先进行依赖的安装，这里直接使用npm方式：npm install element-plus --save然后
转载
2024-04-19 19:14:05
2837阅读
ElementPlus 全局引入与按需引入前言一、完整引入1、安装组件库2、在项目中引入3、设置组件语言二、按需引入1、安装组件库2、Webpack 配置3、在项目中引入（1）全局引入（2）局部引入4、按需引入时设置组件语言总结 前言之前使用 ElementPlus 做项目的时候，由于不会使用按需引入，一个仅需要几个 ElementPlus 组件的 Vue 项目，全局引入 ElementPlus
转载
2024-03-22 14:34:07
2376阅读
选择了element plus。于是按照element plus官网文档操作，安装了nodejs之后就开始 npm install element-plus --save。结果就完全进行不下去了，根本就没有main.js啊。百度之后发现，写的基本上也是跟官网差不多，帮助不大。没有人带入门，踩的坑确实会比较多。摸索之后，终于可以进行开发，记录之，以免同行走弯路。1、使用element pl
转载
2024-08-04 14:22:40
574阅读
◼ 图书管理系统前端代码1. Element UI 的全局引入与使用1.1 全局引入 Element UI 及相应配置◼ 在 main.js 文件中配置import ElementUI from 'element-ui' //导入element-ui所有组件
import 'element-ui/lib/theme-chalk/index.css' //导入element-ui样式1.2 登录
前言一般我们开发单页面应用（关于单页面应用是什么在本专栏的另一篇文章中有介绍）时，特别是针对和我一样打算走后端开发的同学，对于前端只需要有了解的程度就行了，但是平常做项目练手时经常会要自己写前端的东西，所以本文的主旨就是让各位和我一样的后端开发的同学能快速使用element-ui提供的网页组件快速搭建自己需要的网页。小tips在Idea中安装一个叫“element”的插件，就可以在Idea中写el
转载
2024-03-15 10:00:44
932阅读
一 分析vue2时期PC端的UI库封神之作elementUI随着vue3的到来,发布了其续作elementPlus,并在2022年发布正式版本(根据更新日志的信息,全新的稳定版2.0.0于2022-02-07发布).点这里一键跳转至官方网站.在elementPlus中,为了解决普通树形组件无法容纳大量数据的情况,提供了一款新的组件,来解决大量数据用树形组件展示问题,该组件便是我们今天要介绍的主角,
转载
2024-05-29 20:30:03
810阅读
前面和大家分享过自己封装的table了 这次和大家分享一个table的树 无限级的树 自己以前也看过网上写的树 都是里面带折叠的那种的 但是发现一个问题就是我新增了数据进入就会表格会重新渲染了 有点体验不是很好的感觉 然后还有就是样子也不太好看 我就想起了以前的学习ThinkPHP 里面分享了一个table的树 觉得挺不错的 我也想搞一个用前端的方式去写一个 一开始想去再去找找 (自己有点懒 哈哈
转载
2024-04-25 22:28:45
105阅读
Element Plus是最优秀的VUE 3 UI组件
原创
2022-02-18 11:45:18
1256阅读
本节将介绍如何在项目中使用 Element Plus。
用法#
完整引入#
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import
原创
精选
2024-04-02 17:56:27
460阅读
对于Element有两个组件库，一个是基于Vue 2 对应的Element ui，另一个就是基于Vue 3对应的,而我主要进行的是Vue 3的代码的编写，所以我用的是对应的组件库这是。
Vue自3.0 beta发布以来，随着相关技术支持度增强，越来越多的企业开始使用vue3创建项目 下面大概了解一下vue3的新特性Vue3.0新特性一、节点打Tag 什么意思呢？ 就是 真实DOM的渲染会引起整个DOM树的重排重绘，会造成非常大的开销。因此，vue采用了Virtual DOM（虚拟DOM），进行局部更新。虚拟DOM是将真实DOM数据抽取出来，以对象的形式模拟树形结构。在更新节点的过
为什么需要虚拟列表日常开发中，经常需要处理一个大数据量的列表，可能是需要展示、勾选等；如果我们用html原生的标签实现，性能到还好。但是现在大多都是用第三方组件库开发(例如element-ui)，以便提升开发效率；如果我们同时展示、勾选千条数据的时候，页面将会卡主，甚至崩掉；虚拟列表的方案正是为了解决这类前端大数据量展示、操作卡顿的问题；虚拟列表原理虚拟列表只对部分区域进行渲染，对区域外的DOM进
转载
2023-12-28 12:36:12
664阅读
