vue+element 第8页

vue+element 确认弹窗（携带参数返回）

效果图.png//confirmBox.jsimport{MessageBox}from'element-ui'exportdefaultfunctionMeetingConfirmBox(){varisFinish=falsereturnnewPromise((resolve,reject)=>{consth=this.$createElementMessageBox({message:h('d

w_wx_x·2023-03-09 20:47

Vue+Element 日期选择器选择范围限制

在业务中使用日期选择时，通常会遇到要限制日期范围的情况，这里就来看一下element的日期限制是如何实现的。（Element日期选择器：https://element.eleme.cn/#/zh-CN/component/date-picker）在文档中我们可以找到可以通过设置picker-options属性来设置当前时间日期选择器特有的选项，该属性具体参数如下图：picker-option参数我

嗜梦lin·2023-02-19 06:16

vue+element UI实现树形表格

https://www.jianshu.com/p/d38f2857bb5b一：在component文件夹下新建如下treeTable文件夹，里面有2个文件：eval.js:将数据转换成树形数据importVuefrom'vue'exportdefaultfunctiontreeToArray(data,expandAll,parent=null,level=null){lettmp=[]Arra

若水亦城空·2023-02-17 05:32

vue+element封装upLoad

1.开发环境vue22.电脑系统windows11专业版3.在开发的过程中,我们会需要使用到上传的组件;当有多个页面需要使用到上传的时候就比较麻烦;我们可以再次封装。4.废话不多说,直接上代码://创建vueFileUpload.vue文件{FileChange(file,fileList,{type:FileUploadType})}":show-file-list="false":multip

·2023-02-16 20:34

vscode 搭建VUE+element ui 项目

前提环境要求：安装好node，npm以及cnpm.详细操作可以以查看：https://www.jianshu.com/p/aacb69e391bc1.点击vscode的terminal，打开一个新的命令行窗口。image.png2.输入如下命令：vueinitwebpackhello-elementui如果出现如下错误：vue:无法加载文件D:\ProgramFiles\nodejs\node_g

杨康他兄弟·2023-02-05 16:53

vue+element遇到问题总结

1、el-input部分输入框聚焦的时候会出现google的地址管理原因：新版google自动过滤input的autocomplete属性解决：autocomplete="随便一个值"，正常值是off2、解决路由刷新store数据丢失问题https://www.cnblogs.com/zhongchao666/p/9567527.html3、自定义表头switch异常，不使用slot-scope时

ABY_sea·2023-02-05 12:29

Vue+element使用table实现树形菜单

使用一维数组现实树形菜单，根据菜单的层级使用动态样式缩进实现视觉上的层级效果TreeTable{{scope.row.id}}//引入两个封装好的工具方法import{arrayToTree,ergodicTree}from'@/util/util.js'exportdefault{name:"",components:{},props:{},data(){return{list:[],tree:

疯子不需要风·2023-02-05 01:50

vue+Element 实现table表格可编辑（select下拉框 input输入框）

实现思路：聚焦在当前行的时候，可以进行文本的编辑，或者下拉框的选择，主要用到highlight-current-row这个样式借助template组件进行编辑具体代码如下：{{scope.row.columnName}}删除css样式：.tb-edit.el-input{display:none}.tb-edit.current-row.el-input{display:block}.tb-edi

秋慕云·2023-02-04 12:47

vue+element模仿腾讯视频电影网站（二），增加视频播放详情页

一.前言1.本项目在线预览：点击访问2.作者其他博客成品汇总预览：点击访问3.接上一篇：《vue+element模仿腾讯视频电影网站》暂时源码并没有提供其他获取渠道，私聊作者获取即可，或通过博客后面名片添加作者

愛芳芳·2023-02-04 10:39

vue+element upload组件上传多次调用接口(解决方案)

1.开发环境vue+element2.电脑系统windows11专业版3.在使用element的过程中,遇到upload组件上传多次调用接口,下面我来分享一下解决方法://tempalte代码新增//return代码:FileUploadNumber:0,fileList:[],FileChange(file,fileList){console.log(file);console.log(file

·2023-02-03 19:39

vue+element对后台拿到的数据进行转换

在前台对后端返回来的数据进行展示的时候，会出现一些字段为01的情况，这就需要前端来进行转换，在页面中展示为文字。项目中使用element的表格布局可以直接在标签中写判断或者可以用formatter属性:formatter="tableSex"，在methods中写入方法也可以这种写法：tableSex:function(row,column,cellValue){if(row.sex=='0'){

Leest·2023-02-03 01:36

Vue+element实现todo（六—本地存储）

还有一个问题，现在只要我们一刷新浏览器，所有item都没了，我们可以使用浏览器的LocalStorage来实现数据的持续性存储。这样一来只要用户不删除浏览器缓存，我们的item会一直在，当然也可以使用数据库使数据更持久存储，在这里我们用LocalStorage。首先来定义一个对象，用于LocalStorage存储和获取item的相关操作image.pngSTORAGE_KEY用来区分存储到Loca

你想跳舞吗·2023-02-01 02:26

Vue项目使用particles.js粒子效果以及销毁

最近在使用Vue+Element开发一个后台管理系统，想找一个好看点的素材当背景，突然找到particles.js(传送门：https://github.com/VincentGarreau/particles.js

小明同学喜欢熊·2023-01-31 04:41

vue+element ui table表格跳转外部链接

要在element的table组件内实现点击跳转外部页面链接；在el-table-column标签内使用a标签：1638848743(1).png

郜喜忠·2023-01-30 01:47

Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

这篇博客主要介绍树形控件的两个小小的功能：下拉菜单输入过滤框以CSS样式为主，也会涉及到Vue组件和element组件的使用。对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。使用Vue+ElementUI，构建出最基本的树如下图所示：最简单的树结构现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。一、下拉菜单将下拉菜单嵌到树节点中，使操

Ygria·2023-01-28 16:49

Vue+Element 用同一个el-dialog弹框完成新增和编辑

这是效果image.pngimage.png页面代码添加资产编辑删除importDialogComponentfrom"./dialogComponent";exportdefault{name:"DialogDemo",components:{DialogComponent},data(){return{totalCount:0,queryParam:{pageNo:1,pageSize:10}

七分热度丶·2023-01-26 12:18

升级vue+element项目

升级vue在package.json，paclage-lock.json中将vue版本改为目标版本，然后执行npminstall（此次从2.5.9升级到了2.6.10）vue-template-complier需要跟vue版本一致升级element-ui方法一：先卸载elementui：npmuninstallelement-ui重新安装：npminstallelement-ui-S//eleme

Sharise_Mo佩珊·2023-01-26 01:46

使用webstorm配置vue+element开发环境

目录1.设置启动环境2.处理element-ui标签提示unknown的问题3.处理webstorm不识别@路径别名的问题4.处理webstorm使用scss变量1.设置启动环境新建npm,Name可以自定义一个名字，script选择启动项目的指令2.处理element-ui标签提示unknown的问题File-->settings-->Languages&Frameworks-->JavaScr

·2023-01-23 00:09

Vue+element ui表单中省市区级联选择—v-distpicker/Cascader

v-distpicker组件或Cascader级联选择器1.页面-->2.jsimportVDistpickerfrom"v-distpicker";//方式1注册v-distpicker组件import{getCascaderOptions}from'@/district/provinceCity';//方式2导入provinceCity.js中的方法exportdefault{name:"Di

咏絮v·2023-01-21 22:38

Vue+element利用外部按钮实现表格（分页）全选、反选

template部分：全选反选script部分：（真的主要是官方文档里面那个第二第三行选中的状态，反选将二三行那个直接变成tableData[]就OK了.）selAll(){if(this.$refs.multipleTable.selection.length0){this.isIndeterminate=true;}elseif(val.length===this.tableData.leng

缓月·2022-12-31 22:36

vue+element模仿腾讯视频电影网站

一.布局设计官方图例：demo效果：顶部1；左侧菜单栏2；右侧内容展示区3；关键点：顶部固定，不随页面滚动而滚动；左侧可局部滚动显示更多菜单；右侧局部滚动，“总高度：height:100%;剩余高度：height:calc(100%-50px);顶部top即可达到固定效果;三.电影卡片vip{{item.title}}{{item.des}}模拟电影数据：menuIndex1:0,menu1:['

愛芳芳·2022-12-23 07:07

vue+element:el-descriptions组件，数据绑定、内容样式和标签样式自定义

1.绑定接口数据——默认样式展示（未自定义宽度）：2.绑定接口数据——自定义样式展示：3.使用的语法labelStyle="width:150px"contentStyle="width:250px"4.Vue代码展示：预约单元名称{{this.appointUnitForm.appointName}}预约类别{{this.appointUnitForm.appointType}}预约单元归属年份

徐阎·2022-12-06 17:19

vue实现增删改查（内附源代码）

VUE+Element实现增删改查目录VUE+Element实现增删改查前言实验步骤总结：源代码前言最近因为一些原因，没有更博客，昨天老师布置了一个作业，用vue实现增删改查功能，想想这也不难，就做一下试试吧

鲜虾烧麦啵·2022-12-03 14:42

vue+element省市区联动

npminstallelement-china-area-data-S1.按需导入import{provinceAndCityData,regionData,provinceAndCityDataPlus,regionDataPlus,CodeToText,TextToCode}from'element-china-area-data'provinceAndCityData是省市二级联动数据（不带

Gaoju_liz·2022-12-02 21:54

vue+element实现银行卡号只输入数字，四个补一个空位，并实现校验

vue+element实现银行卡号只输入数字，四个补一个空位，并实现校验html输入框只输入数字watch监听实现四个数字补一个空位自定义卡号校验规则html输入框只输入数字//type设置为textwatch

王湘佰BLOG·2022-12-01 22:37

vue+element ui table表格合并相同行

方法封装functionmerge(data,key){constnewData=data.map((item,index)=>{constfilterData=data.filter(ele=>{returnitem[key]==ele[key]})constindex_=data.findIndex(ele=>{returnitem[key]==ele[key]})if(index==inde

Gifted_·2022-11-28 14:30

vue element el-select下拉滚动加载的方法

使用vue+element的el-select下拉框加载返回数据太多时，会造成卡顿，用户体验欠佳，记录一个滚动加载的方法：1、挂载一个全局的方法（main.js）：//滚动加载更多Vue.directive

·2022-11-27 00:35

class vue 添加图片_vue+element 添加图片组件

添加图片效果图微信截图_20200630144419.png微信截图_20200630144532.png由于该组件在页面中使用位置广泛，一但在dialog中使用便会发生错误，故未添加预览功能。子组件:action="`${this.$store.state.uploadBefore}/api-f/file/moreuploads?siteId=${siteId}&userId=${userId}

weixin_39622988·2022-11-23 21:28

使用element-ui的el-image图片预览功能支持图片下载

项目场景：工作中我们常用会到vue+element，其中预览组件难免会涉及到下载功能，或者其它扩展功能，但是el-image支持的只是简单放大旋转功能，解决方法要么修改组件，要么通过js动态渲染进去，接下来看操作解决方法

Fearless··2022-11-23 21:57

【无标题】Vue+element Ui 考试系统考试过程中多选题答案存放问题

在线考试系统考生考试前端设计中，我将考生的答案全部存到一维数组中studentAnswer:{studentId:0,//存放考生idexamId:0,//存放考试idtitleAnswer:[],//存放考生的全部答案titleId:[],},通过v-for获取每道题目的作答但是这样存放多选题时遇到了问题多选题使用的是el-checkbox组件这样显然是不对的，因为多选框需要绑定的是数组，而st

wyyoowyy·2022-11-22 21:01

Vue+element el-table中显示隐藏and重置密码功能

前言：这是一个可以在el-table中显示、隐藏密码，并且具有重置密码的功能。虽然办法有点笨，但是确实是能实现功能的！本大二学生还需努力！1.功能起源elementel-input组件中有一个show-password属性，此属性可得到一个可切换显示隐藏的密码框，但是此属性只能使用在el-input组件中。但是我在写项目中，有一个功能是在表格中可以显示隐藏密码，于是show-password属性在

foursecond·2022-11-10 12:59

Vue+Element一步步实现动态添加Input_输入框案例

目录输入式动态添加单选式动态添加组合式动态添加组合式动态添加(回传名称)单选、多选组合式数据回显完整示例总结单选切换多选（补充）下拉框渲染卡顿问题（补充）双循环遍历优化输入式动态添加输入式：即input的值由用户输入；例如：通过自定义用户标签，给用户动态添加多个标签。添加查看exportdefault{data(){return{table:[{id:'12121',label:''}]}},me

·2022-11-09 15:30

Vue实战开发--后台管理系统Vue+Element ui（3）

这节课开始页面布局项目整体页面效果如下1.首页架子搭建使用Elementui中的Container布局容器，选择倒数第二个样式，将代码复制到Home.vue，//页面架子样式AsideHeaderMain更改Home.vue文件，更改container和aside样式。//Home.vue文件tempalte部分，更改样式一部分container和aside样式。AsideHeaderMain引入

luo_guibin·2022-11-02 00:50

【前端】Vue+Element UI案例：通用后台管理系统-导航栏

文章目录目标代码0.数据1.其他准备2.结构3.动态显示数据4.主题：背景色，点击悬停效果5.去除padding6.去除下拉框7.标题8.路由跳转总代码组件CommonAside.vue文件结构参考目标悬停效果点击效果其他：点击展开和收缩动态显示“首页”“商品管理”等有路由跳转其实是项目的导航栏组件。只打算看导航栏部分的可以跳过1.其他准备。代码0.数据我们把它单独放到一个MenuData.js中

karshey·2022-11-02 00:37

vue+element ui 大文件切片分段上传

直接先上效果图：如果需求是和我一样的就可以接着看下面的代码啦注：1.我区分了音频视频和图片传输，其实传的是一样的只是最后显示不一样的所以做了区分，不需要的可以不要。2.我用的是组件，也可在页面直接写。将文件拖到此处，或点击上传importSparkMD5from"spark-md5"importaxiosfrom"axios"import{getUploadId,doVideoImport}fro

卖公主的小苹果·2022-10-21 20:36

Vue+element自定义指令如何实现表格横向拖拽

目录element自定义指令实现表格横向拖拽自定义指令设置及常用自定义指令指令定义函数提供了几个钩子函数（可选）下面分享几个实用的Vue自定义指令element自定义指令实现表格横向拖拽有时候表格内容会很多，需要横向滚动查看右边的内容，又不想到底部拖动滚动条，如果能直接在内容中拖动就好了，这个时候就可以用Vue的自定义指令来实现了。为了以后扩展指令方便，创建directives.js文件，在js文

·2022-10-21 18:59

Vue+Element UI分段上传（华为云obs、阿里云oss）

前端华为云obs上传文件1.下载SDKBrowserJS（esdk-obs-browserjs3.21.8）2.index.html文件中引入文件static/obs/obsjs/@cloud/esdk-obs-browserjs-without-polyfill-3.21.8.min.js">3.实例化newObsClient()传入参数exportdefault{data(){return{i

天天一码·2022-10-21 13:39

vue+element增删改查

新项目使用的是vue.js后来发现饿了吗前端编写的一套框架Element（http://element.eleme.io/#/zh-CN）来配合vue.js进行样式填充之前用过angularjs用到后来发现越来越难学于是就决定用vue.js下面就介绍一下vue.js应用在表格里的增删改查首先安装相关js以及cssimport'element-ui/lib/theme-default/index.c

前端小骚哥·2022-10-17 12:56

vue+element 动态表格组件

需求1.表头数据不固定2.表头数据多层级3.表格跨行跨列4.表格可编辑5.编辑支持基本表单框子组件代码dynamic-header.vue{{title}}{{getTemplate(item.template,scope)}}{{scope.row[item.tableFiled]}}importTableColumnfrom'./table-column'exportdefault{props

·2022-10-09 15:23

SpringBoot+Vue实现前后端分离的乒乓球馆预约管理系统

文末获取源码开发语言：Java开发工具：IDEA/Eclipse数据库：MYSQL5.7/8.0应用服务：Tomcat7/Tomcat8是否Maven项目：是后端框架：SpringBoot前端框架：vue

qq_834251331·2022-10-04 22:17

vue+element tree懒加载更新数据的示例代码

使用elementtree实现懒加载，更新某一节点的数据1.tree懒加载只需要在el-tree标签上面添加lazy，load属性，load的接收是一个函数。这里贴上官网给出的方法2.load方法使用//懒加载获取树形结构loadNode(node,resolve){//调用接口时，我们的需求是第一级传参为0，后面为当前节点的唯一表示id，可以根据需求而定//node.level为0时，就是tre

·2022-09-24 07:35

vue+element 基础组件（输入框，下拉框，日期框）二次封装

前言组件库也已经上线运行了一段时间，该改的BUG也都解决了，也基本可以稳定运行了。今天就抽出点时间更新下文档方便日后查看！背景随着公司项目的迭代更新，业务需求越来越多，如果继续大规模使用element原生封装的组件，就会使得业务代码更加的繁琐并且难以维护。所以就决定把element进行二次封装，在封装之前查阅了一些资料，为了方便后期维护最后决定分装成一个组件库！设计思路参考网上封装的思路，发现只是

二两毛豆·2022-09-20 14:00

Vue+Element UI 实现省市区数据联动

1.安装npminstallelement-china-area-data-S2.在组件中使用（以省市二级数据联动为例）地址import{provinceAndCityData,regionData,provinceAndCityDataPlus,regionDataPlus,CodeToText,TextToCode}from'element-china-area-data'/*province

YoloAva·2022-09-15 16:40

vue+element ui 省市县三级联动插入+修改回显

vueelement-china-area-data使用详解城市选择器插件参考：https://www.npmjs.com/package/element-china-area-data使用前提vue相关配置已准备好安装npminstallelement-china-area-data-S使用时在scrip中先进行引用在使用,前面代表不同的格式import{provinceAndCityData,

江蜀黍·2022-09-15 15:18

vue+element表格实现多层数据的嵌套方式

目录vue+element表格实现多层数据嵌套这是完成之后的方法 vue+element表格实现多层数据嵌套今天用element的表格渲染了商城的购物车列表，element的表格之前也用到过，它把所有的东西都封装好了

·2022-09-14 11:08

vue+element 环境配置，项目搭建 3.0后版本vue-cli脚手架

1.安装node.js(这个百度简单)2.安装vue-cli脚手架npmi-g@vue/cli3.vue-cli搭建项目1.切换到要创建项目的文件夹下2.vueinitwebpackbm4.基本配置这样就成功了5.项目启动切换目录启动项目npmstart6.点击链接7.安装elementui先ctrl+cy结束项目npmielement-ui-S安装8.项目中引入Element加入三行代码，目录看

亚索不会吹风·2022-09-09 17:09

RuoYi Vue - 若依框架的 Vue 版本，免费开源、生态强大、专业的 admin 后台管理系统，基于 Vue + Element

关于若依RuoYi中文名称叫若依，名字十分二次元，是一个后台管理系统，后端基于经典技术组合（SpringBoot、ApacheShiro、MyBatis、Thymeleaf），前端提供了Bootstrap和Vue

那些免费的砖·2022-09-03 08:44

Vue+element ui实现好看的个人中心

目录一、效果图二、项目结构三、界面效果和代码实现1.路由注册2.个人主页实现3.编辑弹窗按钮实现4.个人简介实现5.发贴页实现6.收藏页实现7.关注和收藏页实现四、总结一、效果图仿照原神社区的个人中心写了个个人中心界面，下图分别为原神社区个人中心主页和我画的个人中心的效果图：原神社区个人中心效果图：我画的个人中心效果图：下面上代码二、项目结构router文件夹里的index.js为路由注册文件，p

jackzjbaby·2022-09-02 17:34

vue+element ui实现好看的登录界面

闲暇之余使用vue+elementui制作了个登录界面话不多说，先上图界面效果图下面直接上代码：Welcome记住密码忘记密码？登录注册import{login}from"@/api/login";import{setToken}from"@/request/auth";exportdefault{name:"login",data(){return{form:{password:"",usern