Vue3+Element

教程6 Vue3+Element Plus el-carousel制作轮播图（后面有修改样式的方法）

实验轮播图1、引入ElementPlus（1）引入Element开发环境npminstallelement-plus--save（2）自动引入Elementnpminstall-Dunplugin-vue-componentsunplugin-auto-import（3）在配置文件中进行配置，本人使用的是Vit构建工具如果使用Vite作为构建工具，配置文件为vite.config.js，配置方法如
JunLianHuang·2024-02-05 11:08

Vue3+Element Plus+TS 项目利用 el-pagination 封装公共的分页组件

项目概要由于近期开发的后台管理系统大部分的页面都存在分页功能，且样式统一。于是打算封装一个公共的分页组件。注：项目采用最新的Vue3setup语法糖效果展示封装前封装后代码实现Pagination.vue子组件0"class="flexjustify-end":background="background":pager-count="pagerCount"layout="total,sizes,p
漓°·2024-01-29 17:10

vue3+element plus的el-pagination分页样式自定义

在style下写入::v-deep(.is-active){background-color:#65cea7!important;}这样就可以完成自定义分页器的样式了，快来试试吧！
Sink_web·2024-01-29 17:39

vue3+Element Plus实现自定义穿梭框

先上效果图：具体细节可以自己调整这里主要说明派单，取消这两个按钮的实现DOM部分代码：派单取消穿梭框的table表头是动态的html中无需修改，使用这个组件首先需要在scripe中创建如下变量consttableData=ref([])//左侧数据constselectedLeft=ref([])//左侧选中数据constsharedData=ref([])//右侧数据constselectedR
左小白·2024-01-29 10:51

vue3+element plus input输入框限制输入数字和小数点

不能以小数点开头，且只能有一个小数点setup(){constinput=Vue.ref(undefined)constinputNum=(value)=>{if(value==undefined)return;returnvalue.replace(/[^\d.]/g,"").replace(/\.{2,}/g,".").replace(".","$#$").replace(/\./g,"").
小小小晓蓉·2024-01-25 23:48

vue3+element plus 实现管理系统布局样式

先看效果未设置样式之前：布局没有充满整个页面，而且布局高度会随着左边菜单内容的展开而变化设置样式后：布局充满整个页面，左边菜单内容展开后也不会影响布局高度，左边菜单内容超出页面高度时会自动添加滚动条项目结构目录：设置样式之前代码：App.vueimportHomefrom'./components/Home.vue'exportdefault{name:'App',components:{Home
平平无奇 > _ <·2024-01-24 22:50

vue3+Element plus实现登录功能

一、想要实现的效果二、搭建登录静态1、实现左边背景和右边登录栏的总体布局布局：2、账号密码登录和手机号码登录切换使用组件实现：3、其他省略4、全部代码：JinPiKa全球最大的代码托管平台忘记密码登录其他登录方式三、封装接口1、首先需要对axios进行一个二次封装，实现请求和响应拦截器，在utils文件夹(一般用于存放封装的文件)下创建一个request.ts文件，importaxiosfrom'
czy陈泽宇·2024-01-24 08:05

VUE3+element plus在el-input上增加图标

目录实现效果关键点实现效果关键点和VUE2+elementUI有差别VUE2+elemenUI使用prefix-icon="el-icon-search"在VUE3+elementplus要使用:prefix-icon="Search"，其中Search图标要单独引入import{Search}from"@element-plus/icons-vue";
尘烟生活家·2024-01-13 08:41

VUE3+element plus在按钮上增加图标

目录实现效果关键点实现效果关键点和VUE2+elementUI有差异。在elementUI直接设置icon立即购买在VUE3+elementplus中要引入icon图标变量立即购买import{Star}from'@element-plus/icons-vue'
尘烟生活家·2024-01-13 08:41

VUE3+element plus在el-tab-pane中增加自定义图标

目录实现效果实现思路实现效果例如提供多种付款方式，使用el-tabs标签进行内容切换，标签头加上图标体验更好实现思路elementplus官网上提供了以下在el-tab-pane增加icon的样例，其中el-icon就是一个svg的图标。只要使用自己的图标替换这里的图标即可RouteRouteelementplus官方提供的图标很少，阿里巴巴的免费图标库提供了很多选择在VUE3项目的src/ass
尘烟生活家·2024-01-13 08:41

VUE3+element plus实现的动态登录注册切换页面

目录实现效果关键点完整代码实现效果关键点通过动态增加和移除class实现css样式的变化。在VUE3里面，不能像原生js那样使用获取元素对象来动态增加和删除class，需要在节点上增加ref属性，通过ref来实现完整代码RegisterSubmitLoginForgotyourpassword?SubmitLoginRegisterexportdefault{name:"LoginRegister
尘烟生活家·2024-01-13 08:40

通过Vscode 简单创建一个vue3+element的项目

首先确保安装的nodejs是18版本以上确保你安装了最新版本的Node.js，并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令VSCode打开终端输入构建项目命令，个人推荐如果有cnpm使用cnpmnpmcreatevue@latestcnpmcreatevue@latest创建成功之后引入element依赖包cnpmielement-ui-S完整引入在main.js中写入以下内
m0_58462450·2024-01-12 07:52

vue3+Element plus 实现暗黑模式

暗黑模式说明：暗黑模式是指在应用程序或操作系统中使用暗色背景和浅色文本的界面设计。与传统的亮色模式相比，暗黑模式具有以下特点：减少眼部疲劳：使用暗色背景可以减少屏幕发出的蓝光，减轻长时间使用电子设备对眼睛的疲劳程度。这对于在晚上或低光环境下使用设备的人来说尤为重要。节省电池寿命：在有机发光二极管（OLED）或柔性有机发光二极管（AMOLED）屏幕上，黑色像素是不发光的，因此在暗黑模式下使用这些屏幕
前端小趴菜05·2024-01-05 18:27

vue3+element plus树穿梭框

HTML{{leftTit||'左侧栏'}}{{rightTit||'右侧栏'}}穿梭框控制逻辑import{ref,nextTick,defineExpose}from'vue'import{Right,Back}from'@element-plus/icons-vue';constprops=defineProps({nodeKey:String,fromData:Array,toData:A
BarryKerrigan·2023-12-31 21:25

从零开始Vue3+Element Plus后台管理系统(十五)——多语言国际化vue I18n

i18n国际化的内容比较多，写文章的时间也用得比较长，从上周五开始到本周一，断断续续完成了。虽然实际工作中很多项目都不需要国际化，但是了解国际化的用法还是很有必要的。i18nVueI18n是Vue.js的国际化插件。它可以轻松地将一些本地化功能集成到你的Vue.js应用程序中。VueI8n官方文档：https://vue-i18n.intlify.dev/首先，安装匹配Vue3的vue-i18nn
immocha·2023-12-28 07:30

vue3+element ui组件库el-cascader层联选择器动态加载数据，动态加载省市区县镇街道数据,点击第一级请求数据，根据leaf判断是否有子项，第二级....等，原理同上

1.效果图2.HTML取消确定3.js//准备数据letoptions=reactive([])letdialogVisible=ref(false)//控制弹层constarea=()=>{dialogVisible=true}//初始化省数据constgetAreaData=()=>{//1.创建ajax对象（异步对象）letxhr=newXMLHttpRequest();//2.创建请求//
00代码搬运工·2023-12-25 14:54

vue3+element plus组件库中el-carousel组件走马灯特效，当图片变动时下面数字也随着图片动态变化

1.效果图2.html回收垃圾数量{{item.name}}{{item.data}}kg3.js//准备数据//1.vue3采用import的方式引入图片,不然会报错，引入方法之一importblfrom'@/assets/img/bl.png'importjsfrom'@/assets/img/js.png'importslfrom'@/assets/img/sl.png'importzlfr
00代码搬运工·2023-12-25 14:24

Vue3+Element plus项目搭建

搭建vue3方法：方法一新建index.html文件，导入html模板在head头部通过CDN引入Vue3和Element-plusUI框架新增标签属性id，并加入按钮的点击事件和变量定义变量运用组合式api以及setup函数绑定变量暴露事件最后创建应用将变量和插件挂在到节点上Vue3点击了{{time}}次constvue3Composition={setup(){consttime=Vue.r
蚂蚁二娘·2023-12-19 22:39

vue3+element Plus 清空el-tree复选框选中项

前提问题：el-tree加了show-checkbox复选框属性后，在选择完复选框后切换，不会自动清空选中内容，要求在切换时清空复选框选中内容，解决过程：设置el-tree的ref值，使用setCheckedKeys方法可清空复选框所选中的内容解决方法：html:  切换js:constswitch=()=>{  //清空复选框勾选内容  treeRef.value.setCheckedKeys(
小陈学前端_·2023-12-19 06:00

使用Vue3+Element Plus开发Chrome插件

使用Vue3+ElementPlus开发Chrome插件引言初始Vue项目的创建Element-Plus组件的安装及导入其他文件配置.eslintrc.js文件vue.config.js文件package.jsonsrc/文件夹assets/background/main.jscontent/components/app.vue文件content/main.js文件plugins/inject.j
旺旺碎冰冰屮·2023-11-30 15:58

vue3+element plus下面，自定义el-table表格标题

参考了网络上很多资料，照着写，都不行，后来自己琢磨了一会儿出来了，代码如下：{{"权限列表"}}全选全不选{{item.func_nice_name}}效果如下：
点点2B·2023-11-28 11:06

vue3+element plus 树形控件权限控制

getbynodesetbykeyreset</el-butto
大盗夕落·2023-11-21 15:42

关于vue3+element plus，el-dialog里表单重置问题

最近项目一直用vue3+elementplus，发现el-dialog里form表单el-form使用resetFields()并没有想象中会重置弹窗的表单项和表单验证状态。经过好长一段时间之后，突然明白了为什么。首先，父组件引用子组件，子组件为弹窗el-dialog下面是父组件示例新增编辑import{getMaterialCategoryList}from'@/api/videoThemeMa
Yne宴宁·2023-11-20 14:14

Vite Vue3+Element Plus框架布局

App根组件：框架布局首页新闻管理新增新闻新闻列表新闻管理系统欢迎Lily回来import{ref}from'vue'//注册icon:icon需要单独注册import{MenuasIconMenu,Message,Setting,HomeFilled}from'@element-plus/icons-vue'import{useRouter,useRoute}from'vue-router'co
无盐海·2023-11-18 18:17

Vue3+element plus实现table拖拽排序(基于Sortablejs)

引入依赖sortablejsnpminstallsortablejs--save2、引入sortablejsimportSortablefrom'sortablejs'在shims-vue.d.ts文件中加入declaremodule'sortablejs' -->-->import{reactive,ref,onMounted,watch,nextTick}from'vue'impor
L.@·2023-11-05 07:44

Vue3+element plus实现table拖拽排序(基于Sortable.js)

效果图第三方插件Sortablejs1、引入依赖sortablejsnpminstallsortable.js--save2、引入sortable.jsimportSortablefrom'sortablejs'代码实现：删除importSortablefrom'sortablejs';conststate=reactive({UserAchieve:[]})onMounted(()=>{next
很困的程序媛·2023-11-05 07:14

vue3+element Plus实现弹框的拖拽、可点击底层页面功能

1、template部分必须加的属性modal:是否去掉遮罩层close-on-click-modal:是否可以通过点击modal关闭Dialogdraggable:开启拖拽功能2、css部分网上查找的资料，css需要修改pointer-events,主要的作用是设置元素是否对鼠标事件做出反应.el-dialog__wrapper{pointer-events:none;/deep/.el-dia
wyy爱学习·2023-11-05 07:13

Vue3+Element Plus使用svg加载iconfont的解决方案

安装依赖由于我们是Vue3项目，可以使用vite来快速创建一个Vu3项目：npminstall-gyarnyarncreatevitemy-vue-app--templatevue//这里我们使用vue模板，默认是Javascript语法，如果需要ts语法则需要指定模板为vue-tscdmy-vue-appyarnyarndev创建好项目后，我们再来引入ElementPlus，安装并引入的过程如下
web老猴子·2023-10-28 23:57

vue3+Element Plus，实现输入身份证号计算出出生日期、年龄和性别

代码如下import{ref,reactive}from'vue'constformInfo=reactive({idNumber:'',birthday:'',age:0,sex:''})//身份证号正则表达式constIdNumberRule=/(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|1
再希·2023-10-17 23:03

vue3+element plus文件上传阿里云oss

vue3+elementplus文件上传阿里云oss，文件无需经过服务器优点使用文件直传oss服务器的方式可以加快上传的速度，节约后端网络资源。但是如果不设置上传认证的话容易导致服务器被恶意上传文件，所以使用后端服务器生成授权信息，授权的信息与上传的路径相关，客户端只能往服务器授权的路径上传文件，可以保证不被随便上传文件。后端代码（java）pom.xml添加依赖com.aliyun.ossali
hhcxy1·2023-10-10 04:34

Vue3+Element表格数据导出为Excel

1、安装依赖npminstall--savexlsxfile-savercnpminstall--savexlsxfile-saver2、给表格添加id，导出的时候需要用到导出3、引入依赖//引入导出Excel表格依赖import*asFileSaverfrom"file-saver";import*asXLSXfrom"xlsx";4、导出//导出表格按钮点击后触发事件constexportEx
25:17·2023-10-07 16:07

Vue3+Element Plus搭建项目

本项目将基本最新的vuecli去创建，所以先检查和升级vue版本一、Vue搭建基础项目安装升级vue安装…升级vue查看版本vue-V卸载和升级npmuninstallvue-cli-gnpmconfiggetregistrynpmconfigsetregistryhttps://registry.npm.taobao.orgnpmi-g@vue/cli在查看vue版本vue-V已经是4.5.14
银河护卫队长·2023-09-27 01:01

vue3+element Plus实现表格前端分页

每一处都写了注释，还是很容易看懂的分页-->import{defineComponent,reactive,toRefs}from"vue";exportdefaultdefineComponent({name:"HomeView",components:{},setup(){//表格的全数据（这里是自定义的列表，要看分页效果自行往此数组内加数据）constallTableData=[{date:
Xwf1023·2023-09-27 01:57

Vue3+element plus+sortablejs实现table列表拖拽

1、安装npminstallsortablejs--save2、引入importSortablefrom'sortablejs';3、使用表格表头必须加row-key，否则会出现排序错乱完整代码table.vue{{row.no}}{{row.caseNum}}.......onMounted(()=>{columnDrop()rowDrop()})//列拖拽：列拖拽方法实际上就是修改表头数据的值
ZYJ~·2023-09-16 12:21

Vue3+Element Plus实现el-table跨行显示（非脚手架）

Vue3+ElementPlus实现el-table跨行显示app组件内容使用:span-method="objectSpanMethod"自定义方法实现跨行显示查询方法初始化挂载新建一个html即可进行测试，完整代码如下效果图app组件内容查询使用:span-method="objectSpanMethod"自定义方法实现跨行显示constobjectSpanMethod=({row,colum
凌霄玉阶非所愿·2023-09-11 13:22

vue3+element plus使用修改element的主题色问题

用vue的cli脚手架搭建了一个vue3项目（用的node-sass），使用elementplus库，按照饿了么官方文档自定义主题操作后，发现项目报错如下：感觉很神奇，当初vue2和element我就是这样类似操作的呀，都可以成功的嘛解决办法：经过一系列排查后发现，将node-sass换成dark-sass就可以解决问题了。原因分析按照报错提示进入到node_modules/element-plu
a10534126·2023-09-07 17:49

vue3+element plus 封装上传组件（图片、文件）

vue3+elementplus封装上传组件（图片、文件）1、新建封装组件components/upload.vue2、引入upload组件3、效果展示1、新建封装组件components/upload.vue上传文件支持jpg/jpeg/png；图片大小不能超过2M；文件大小不超过20M；最多上传{{limitNum}}个文件import{ref,watch}from'vue'import{El
前端~初学者·2023-09-05 01:48

Vue——vue3+element plus实现多选表格使用ajax发送id数组

代码来源:Vue3结合elementplus（问题总结二）之table组件实现多选和清除选中（在vue3中获取ref的Dom）_multipletableref.value.togglerowselection()打印出来的是u_子时不睡的博客-CSDN博客前言为了实现批量删除功能的功能需要用到多选表格，自己用vue实现很麻烦，遂上上网查找.终于找到了上面的文章。实现结果图如下一个是前端的图，一个
北岭山脚鼠鼠·2023-09-04 17:33

浅谈基于vue3+element二次封装el-upload组件

闲话少说，先上二次封装el-upload代码         选择文件   import{ref,watch}from"vue";import{ElMessage}from"element-plus";importtype{UploadFile,ElUpload}from"element-plus";constprops=defineProps({ url:{  type:String,  def
listener_life·2023-08-29 09:09

Vue3+Element Plus的项目搭建

Vue3+ElementPlus的项目搭建什么是Vue3和ElementPlusVue3是Vue.js的最新版本，它是一个用于构建用户界面的渐进式框架。Vue3提供了更好的性能、更好的开发体验、更好的组合能力和更多的新特性，例如Proxy响应式系统、CompositionAPI、Teleport、Suspense等1。ElementPlus是一个基于Vue3的UI组件库，它提供了丰富的UI组件和样
·2023-08-28 18:22

vue3+element下拉多选框组件

1"#prefix>(多选)x{{selectedOptions.data.length}}{{item.label}}全选反选import{ref,reactive,computed,watch,defineProps,onMounted}from'vue'letprops=defineProps({options:{type:Array,required:true}})letoptionsDa
Aucanon·2023-08-23 18:25

Vue3+Element plus+pageHelper实现分页

安装elementplusnpminstallelement-plus--save引入修改main.js：import{createApp}from'vue'importAppfrom'./App.vue'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'constapp=createApp(App)app.
xwj1992930·2023-08-13 19:13

vue3+element plus+ts的日期控件的选择时间范围

封装日期时间限制控件，文件放在interface/index.ts文件夹里；//封装的日期禁用控件。interface/index.tsimport{toRefs}'vue';exportinterfaceClassifyDate{startDate:any;}/**@description:判断今年是闰年还是平年。闰年366天平年365天@return{*}**/constgetDay=()=>
active_lm·2023-08-10 17:59

Vue3+element动态增减el-tabs

文章目录overview设计容器容器主体样式文件容器左侧overoverview这个问题我想了很久，怎么能优雅地实现点击左侧边栏，右边动态增减。现在有点眉目了设计容器容器主体主要思路：分为三个部分，容器整体，容器左侧，容器右侧。左侧是按钮组，右侧是待渲染部分。我把侧边栏单独抽出来做了个组件，不重要。然后重点是动态增减Tabs，最重要的就是用component的:is属性，根据按钮的callBack
亭台烟雨中·2023-08-05 12:02

在宇道管理系统中vue3+element plus中富文本的配置和调用方法

//富文本代码import{createEditorConfig}from'@/views/mp/draft/editor-config'constUPLOAD_URL=import.meta.env.VITE_BASE_URL+'/admin-api/infra/file/common/upload'//上传永久素材的地址//constUPLOAD_URL=import.meta.env.VIT
隐含·2023-08-03 17:37

vue学习笔记——Vue3+element ui 如何在table组件内实现下拉列表的功能

在使用elementuiplus时，想要在table组件内加入一个下拉列表的功能，发现在文档内没有展现，通过查阅其他文档发现可以使用如下的方法进行实现。下方是组件的完成代码，复制在项目内可直接看到效果。代码如下：exportdefault{data(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No.189,GroveSt,L
chen_sir_sh·2023-07-25 10:27

使用VUE3+Element Plus 实现动态表格

他的原理是，只要el-table表格数据的键（tableData.list的键），与遍历时表头的prop对应上（tableHeader的值），就可将数据渲染上去。如果需要更改表头顺序，只需要对tableHeader进行排序即可。（当然，跟后端关系好，可以让后端直接返回表头，前端仅需遍历即可）预览效果：整体代码如下import{reactive}from"vue";exportdefault{nam
Geeca·2023-07-21 10:51

vue3+element 表格单元格合并

//SKU合并列表数据functionobjectSpanMethod({row,column,rowIndex,columnIndex}:any){letdata=goodsList.value//拿到当前tatle的数据letcellValue=row[column.property];//当前位置的值letnoSortArr=['attr_string','goods_unit','good
luckycoke·2023-07-19 08:52

vue3+element plus 如何实现可编辑表格

方法一：使用elementplus中的VirtualizedTable虚拟化表格具体使用详见elementplus官网方法二：使用elementplus中的table表格+input输入框，特点是可控制输入框得焦与失焦之后样式的改变（通过事件对象拿到dom，并控制后续样式变化）样式如下：1.点击表格内容部分，输入框边框显示出来，此时内容可编辑2.失焦之后，根据失焦事件完成后续样式修改代码如下：im
xhjtcflm·2023-07-17 12:07

企业级通用低代码开发平台——一二三应用开发平台发布1.0开源版本，前端vue3+element plus，框架vue-element-plus-admin，后端ssm+MybtaisPlus

平台由来早些时候，也就是三月初的时候，定了一个长期计划，即再启程，研发应用开发平台（详见本专栏第一篇https://blog.csdn.net/seawaving/article/details/129334330）。经过大概两个月的努力，低代码配置功能部分完成了雏形，并使用配置功能，将系统管理模块实现出来了，相当于进行了初步验证，在实现过程中低代码配置部分也进行了完善和改进。现正式发布1.0版本
学海无涯，行者无疆·2023-06-18 21:14
上一页 1 2 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他