vue+element

Vue+Element表格嵌入复选框=》模拟单选框

复选框模拟单选框：Vue代码：可直接复制（去掉注释即可运行）shopInfo//单选方法,返回选中的表格行//添加一个多选框,控制选中与否{{scope.row.date}}exportdefault{name:'shopInfo',data(){return{tableData3:[]}},created(){this.setTable()},methods:{setTable(){letres
StormBUG·2020-08-23 03:43

Vue使用ElenmentUI的表单出现validate is not function错误

在学习使用vue+element的时候使用表怎么也验证不了，就出现validateisnotfunction异常，百度搜索也没找到合适的解决方案，只能自己调试。以下是错误截图。
锐、锐·2020-08-22 22:35

清空el-cascader的所选内容（vue+element ui）

点击清空筛选项按钮清空el-cascader的所选内容htmljshandleChange(value){this.form.goodsClassifyName=value[2];}清空方法this.form.goodsClassfiyList=[];this.form.goodsClassifyName="";实现的效果和原理与el-cascader标签的clearable相同
小可爱的博客·2020-08-22 19:17

vue + element + el-cascader级联选择器

vue+element级联选择器element级联选择器cascader默认的是label和value，要修改成后台返回数据对应的字段，则设置（1）:props=“defaultData”,然后在data
weixin_43503080·2020-08-22 19:14

VUE+Element UI实现简单的表格行内编辑效果

VUE+ElementUI实现简单的表格行内编辑效果elementUItable点击编辑按钮进行编辑实现示例vue.js的element表格在线编辑的正确姿势vue-element-extends
ChouCat·2020-08-22 18:38

vue+element 如何在Cascader级联选择器 懒加载lazyload中 实现 服务端请求数据

在使用ElementUI的Cascader级联选择中，有时候需要动态加载，在文档中，也提供了相关的示例代码：这只是示例代码，lazyload中往往是通过请求服务端来获取数据，不多说，直接贴代码ElementUI：17Vue：12exportdefault{3name:'basetable',4data(){5letthat=this;6return{7loading:false,8input_se
落日长烟·2020-08-22 17:10

vue+element级联查询

vue+element级联查询前端代码data数据data(){return{type1:'',radio:'1',labelPosition:'right',formLabelAlign:{name:
PanQiHang·2020-08-22 16:17

vue+element展示时间面板，显示可选和禁用的时间

vue+element实现时间选择最近有个需求，客户A在预约18号技师时，要根据18号技师的服务时间，自动展示哪些时间段可以预约，哪些时间段18号技师正在服务，而正在服务的时间段，客户A是不能预约的，页面效果如下
Sun_Loading·2020-08-22 16:34

JS数组递归——构建 element 级联选择器树形数据

JS数组递归——构建element级联选择器树形数据通常，我们前端在开发管理后台的时候，会选择vue+element这样的技术栈去实现。但我们后端给的数据格式通常并不符合element的参数数据要求。
FungLeo·2020-08-22 16:33

vue+element级联选择器对接后台数据

1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值，如下：/***@Auther:GGDong*@Date:2019/4/310:30*/@Getter@SetterpublicclassServerList{//值privateStringvalue;//名称privateStringlabel;//子级privateListchildren;}2.最主要的
weixin_30847939·2020-08-22 15:15

vue+element级联选择器(选择任意一级选项)

页面效果页面代码：添加v-if判断是为了在添加中显示，而修改时隐藏，由于第一次学习写vue，只能使用比较笨的方式下面实现步骤exportdefault{name:"ProductSplm",data(){return{parentData:[],parentId:"",optionProps:{value:"id",label:"name",children:"children",checkStr
srz1128·2020-08-22 15:54

记录一次vue+element 级联动态加载、编辑回显

之前写过的，忽然就想不起来了，这次写了记录一下，省的再忘了。elementCascader级联选择器具体属性可以查看官网https://element.eleme.cn/#/zh-CN/component/cascader，我只说一下options和props。options在非动态渲染的时候可以把级联的所有数据放进去就好，贴一段老大写的递归方法：@OverridepublicJSONArrayb
dingchaochao_9110·2020-08-22 15:35

Vue+element 级联选择器 编辑操作内容回显

级联选择控件的回显问题场景一：后端返回的是字符串，但是其格式是数组类型法一：遍历字符串，转成数组法二：使用JSON，将字符串直接转换成json对象场景二：后端返回的是纯字符串，以逗号分隔解决场景一：后端返回的是字符串，但是其格式是数组类型后端返回结果如:"[1,2,4,5]"修改方法：法一：遍历字符串，转成数组因为数组是string类型的即“[1,24,5]”将”[”和“]”,substring将
相守之路·2020-08-22 15:22

【vue】使用vue+element搭建项目，Tree树形控件使用

目录一、安装依赖二、常用属性、事件三、demo应用html代码属性用法3.2.1:default-expanded-keys(默认展开项)3.2.2:props="defaultProps"用法3.2.3通过render-content方法定义树节点内容(js代码)3.2.4:load="loadChildData"（load加载子树数据的方法，仅仅当lazy属性为true时生效）(js代码)3.
weixin_34138139·2020-08-22 14:11

vue+element踩坑记-项目build打包以后入口文件显示空白的解决方案

现象描述我在准备测试一个项目的时候，需要打包给后端使用，我打完包以后发现，入口文件，也就是这个文件该文件是直接打不开的，那么我之前是遇到过的，此类的问题，开始是认为是router.js里面的mode改变了导致的，也就是我们在配置路由的时候是可以直接将mode：history的，在路由文件里面，但是我改变以后发现还是不行的，后来百度了以后发现是因为其中有一个文件是不对的，需要我们在配置文件里面将一个
何处锦绣不灰堆·2020-08-22 13:13

vue+element:富文本编辑框使用

表单设计：//富文本编辑框updated(){vareditor=newE(this.$refs.editor)editor.customConfig.uploadImgShowBase64=true//使用base64保存图片//不可修改editor.customConfig.uploadImgHeaders=this.headers//自定义文件名，不可修改，修改后会上传失败editor.cu
1361976860·2020-08-21 17:38

vue+element使用vue-quill-editor的富文本编辑器

备注：我这里采用的是npm的安装模式配合vue-cli1.安装：cnpminstallvue-quill-editor--save2.安装quill依赖：cnpminstallquill--save3.如何很多页面都需要用到，可以选择在main.js中引入，如下：importVueQuillEditorfrom'vue-quill-editor'import'quill/dist/quill.co
wangle_style·2020-08-21 17:02

Vue进阶（八十一）：Vue+element UI实现“回到顶部”按钮组件

介绍这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。使用方法由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。使用示例元素-->importBackToTopfrom'./BackToTop'exportd
No Silver Bullet·2020-08-21 16:25

vue+element项目中过滤输入框特殊字符小结

可以在main.js中写入方法Vue.prototype.validSe=function(value,number=255){value=value.replace(/[`～*~!@#$%^&*()_\-+==number){this.$message({type:"warning",message:`输入内容不能超过${number}个字符`});}returnvalue;};HTML部分se
csdn_1999·2020-08-21 12:48

Vue+Element UI使用富文本编辑器案例

npm安装编辑器组件具体方法：npminstallvue-quill-editor–save具体实现1.在components文件夹里创建editor.vue组件，具体代码如下：exportdefault{name:'UE',data(){return{editor:null}},props:{defaultMsg:{type:String},config:{type:Object}},mount
java后生·2020-08-21 12:45

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

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

Vue+Element实现分页（前台分页/后台分页）

一、如果后台写了相关接口方法，那我们就可以配合后台进行分页，分页请求数据，避免第一次请求数据时间过长。（1）首先使用element-ui中的分页组件,效果如下图所示image.png其中total是数据的总条数，current-page是当前的页数,current-change则是当页码改变时触发的方法，其中@和：的区别我的也记录的有，大家感兴趣可以看看（2）首先在data当中定义三个属性，分别用
Poppy11·2020-08-20 17:35

Cat-Tree-Select 基于Vue+Element的树选择器

Cat-Tree-Select基于Vue+Element的树选择器基于Element的Vue组件(Vue.js2.x)cat-tree-selectGithub地址前言本人在最近的开发工作中常需要用到树选择器目前最好用的基于
究极死胖兽·2020-08-20 11:28

vue同一个页面可以有多个router-view

使用Vue+Element搭建项目的时候，为了避免一个页面过大，将tab里面的内容分成多个页面，并使用同级视图展示分别给router-view定义一个name，默认显示的可以不用定义然后在路由中定义components
蜡笔小心丶·2020-08-19 04:20

【场景实现】Vue+element如何让帖子评论带上emoji，这个需求让我在富文本Quill开始了踩坑连连看

天降巨坑1：Quill富文本输入的内容提交后显示的有文本+标签到底是个啥说不明道不白的情况，来看看效果图：emm…看起来让人感觉真是怪别扭的。我也是前前后后想了很多种办法，却忽略了一种最原始的！最简单的！直接将输入的内容中的发表绑定的sendQuillComment点击事件：sendQuillComment(){if(!this.$refs.postForm.form.content){this.
椰 卤·2020-08-18 23:07

vue+element ui 带字或者组件分割线

vue项目中需要用到带文字或者是按钮的分割线，并点击分割线进行另外组件的展示或者隐藏，研究了一下，记录一下{{msg}}查勘结果.line-left-right{padding:00px0px;margin:20px0px;line-height:1px;border-left:750pxsolidrgb(221,221,221);border-right:750pxsolidrgb(221,22
LazyTing·2020-08-18 20:31

Vue+Element UI的环境搭建

一、搭建环境由于新的node已经集成了npm，所以直接安装node，前往node官网下载最新版本的node，根据自己的操作系统选择相应的包，按照步骤一步步走就可以，这里不做过多介绍。安装好后可以打开命令行用npm-vnode-v查看是否安装成功以及版本号如果以前已经安装过node和npm最好升级到最新版本，命令行[email protected]首先全局安装vue-cli,打开CMD命令行，
前端小易·2020-08-18 06:15

vue+element实现自定义主题功能

第一步按照element官网介绍安装依赖npmielement-theme-gnpmielement-theme-chalk-D执行代码et-i根目录会生成element-variables.scss文件修改$–color-primary：你喜欢的颜色值执行et然后你就会看到theme文件夹下的font文件了main.js中引入import'../theme/index.css'封装组件名为The
weixin_43926335·2020-08-18 05:24

记录--vue+element无限级动态树菜单（加入点击事件）

因为项目里需要用到多级动态菜单，在网上找了一下参考了这位的方法点我点我首先创建一个子组件：{{menu.name}}{{menu.name}}importmenutreefrom"./menu";//调用自己exportdefault{name:"menutree",data(){return{directory:{}};},components:{menutree:menutree},props
歪特不呐呐·2020-08-18 05:08

Vue+element+Nodejs学习记录（1）

目前的打算是前端用Vue+element，后端用Nodejs的Express框架，实现一个展示页面和后台管理页面。打算记录学习过程。
Cacra·2020-08-18 03:55

vue+element实现动态换肤功能

有时候一个项目的主题并不能满足所有人的审美，这时候换肤功能就很友好，本项目基于vue+element实现后台管理项目的换肤功能1.创建换肤组件constversion=require("element-ui
nrskhdzl·2020-08-18 00:48

Vue+Element——NavMenu 导航菜单

一.参考页面1.https://blog.csdn.net/qq_34117170/article/details/807585751.通过代码跳转页面无法选中，例如this.$router.push({name:'invoiceApplyList'})1-1解决办法watch:{'$router':'curRoute'},computed:{curRoute(){letpath=this.$ro
m0_37616866·2020-08-17 23:30

Vue+element使用@keyup.enter不起作用

今天在写登录功能的时候，在用Vue的@key.enter的时候由于使用elementUI组件，@keyup.enter不起作用，经排查，发现需要这样@keyup.enter.native=“login”代码用户名登录密码登录使用情景实现点击enter键的时候能够提交表单1、当用@keyup.enter敲击enter回车之后直接提交表单,如果加了element组件就要用@keyup.enter.na
Alive_tree·2020-08-17 11:40

vue+element 动态加载数据，checkbox实现全选，不全选

效果图：功能描述：图中所展示数据，全是从服务器获取的数据动态加载，实现点击全选，不全选，加粗字体为父节点，后面为子节点。数据结构：[{"children":[{"children":[{"incode":"202","isdist":0,"remark":"yzzd","value":"一轴制动"},{"incode":"203","isdist":0,"remark":"ezzd","value
石意·2020-08-16 20:39

vue+element 日期区间选择后提示是星期几

//日期区间exportdefault{data(){return{weekOptions:['周日','周一','周二','周三','周四','周五','周六'],checkedWeek:[],}},methods:{handleChange(value){this.weekOptions=['周日','周一','周二','周三','周四','周五','周六']if(!value)returnl
5335ld·2020-08-15 19:57

vue+element下拉框实现 三级联动

要求实现三个带搜索的下拉框的三级联动，element里的下拉框带搜索，可以实现，就是三级联动需要自己实现给到三个接口，1，获取小区list2，获取该小区楼栋号3，获取楼栋下的房间号实现如下：因为涉及到回填，所以页面一加载就要获取url的小区id，mounted发起请求，请求所有小区，所有小区赋值给this.villagList,（！！！在请求的里获取url里的小区编号，不然会出现小区的下拉框只会出
神奇的大米·2020-08-15 19:44

vue+element的table数据导出为excel教程

相关代码1、安装相关依赖主要是两个依赖npminstall--savexlsxfile-saver如果想详细看着两个插件使用，请移步github。https://github.com/SheetJS/js-xlsxhttps://github.com/eligrey/FileSaver.js2、组件里头引入importFileSaverfrom'file-saver'importXLSXfrom'
jingtian678·2020-08-15 14:09

vue+element多级v-for循环表单验证

如下图所示：v-for循环生成的不定个数不定层级的表单验证，可以手动新增或删除，现以两层循环为例验证方法如下：先看结构首先：要为每个form-item添加rules其次：item要绑定动态的prop,如上，循环的titleParams拼接对应的下标io再拼接对应绑定的字段名称此处注意：多级循环中，下级循环item绑定的prop要从第一级循环开始拼接，如上图中的二级循环，‘titlePatams’为
跳恰恰的夫子·2020-08-15 00:00

vue+element弹窗中表单校验遇到使用$nextTick的典型情景

vue+element弹窗中表单校验遇到使用$nextTick的典型情景如下图：新增和编辑使用同一个dialog，编辑时自带名称，然而再点新增时清空名称会有必输校验提示，现需求直接切换不需要校验提示点击编辑按钮时的弹窗
跳恰恰的夫子·2020-08-15 00:00

vue+element 图片加载失败处理方案--起死回生之术

基于vue+elementImage组件el-image组件加载失败默认如下图：（这不是想要的结果，我想要真正加载成功的图！！！）失败的原因最大的可能就是网速不给力、页面图片太多同时请求队尾的图片请求超时等。解决方案是请求失败的图片重新发起请求！el-image结构代码如下：（循环生成的多张图片，同样适用于单张图片，不过单张图片无需如此麻烦）vue项目error方法绑定once，为避免同一个失败链
跳恰恰的夫子·2020-08-15 00:29

基于vue封装的正则表达验证

由于公司项目用到的表格比较多，考虑用到了vue+element开发，其中注册的表单填写，以及表格的增删改查用到了比较多的正则验证,element也有自己封装的必填校验，以及简单的正则，但是这并不能满足我们公司的需求
C。阳·2020-08-15 00:16

Vue+Element实现表格的编辑、删除、以及新增行的方法

需求如图所示直接上源码时间周期设置配置列表新增-->{{(page-1)*size+scope.$index+1}}编辑删除-->-->-->取消确定exportdefault{data(){return{total:2,size:5,page:1,loading:true,//表格的数据tableData:[{id:"1",name:"健康评估周期",cycle:"10分钟",cycleMax:
yy1209357299·2020-08-13 23:02

vue2.0+axios+elementUI实现增删改查

最近尝试使用vue+element实现增删改查功能，在实现的过程中遇到了蛮多问题，现在总结如下：首先安装相关的插件1、根据vue官网推荐，使用axios进行前后台交互，安装axiosnpminstallaxios-S2
weixin_34378767·2020-08-13 21:06

vue+element UI＋原生JS实现日期倒计时

直接来代码:小瑶瑶生日倒计时还剩下{{time}}秒{{timeDay}}天newVue({el:'#app',data:()=>{return{newTime:'2021-4-15',timeOut:null,time:0,timeDay:0,}},methods:{setTime(){this.timeOut=setInterval(()=>{setTimeout(()=>{lettimeda
梦想家-M·2020-08-13 15:38

Vue+element 实现表格的增加行、根据索引删除行的功能

功能需求：1、实现一个表格，可以增加行，可以修改每一行的数据；2、获取选中的行的数据，获取选中行的索引；3、根据获取的行的索引删除相应的一行的数据。tableData的数据是写死的，具体开发可以从后台获取。具体的代码实现如下：import'../../../assets/css/commlist.css'import'../../../assets/css/comm.sass'import'../
奋斗的吧小菜鸟·2020-08-13 15:49

vue+element 表格中全选与清除选中

表格中添加事件@selection-change（回调参数为选中的选项）事件名说明参数select当用户手动勾选数据行的Checkbox时触发的事件selection,rowselect-all当用户手动勾选全选Checkbox时触发的事件selectionselection-change当选择项发生变化时会触发该事件selection方法名说明参数clearSelection用于多选表格，清空用
陌上花开·2020-08-13 15:14

vue+element实现批量删除

添加信息批量删除定义sels:[]data(){return{name:'评论管理',comments:[],comment:{},centerDialogVisible:false,form:{},list:[],sels:[]//选中的值显示}}定义methods方法//批量删除,选中时触发，将选中的数组组成一个数组selsChange(sels){this.sels=sels},asyncb
drunk喵咪·2020-08-13 14:38

vue+Element做表格的批量增加

全部代码如下:批量增加{{scope.row.title}}{{scope.row.text}}取消确定exportdefault{data(){return{tabledatas:[],dialogTableVisible:false,//添加用户弹框//添加数据addData:{title:"",text:""},//验证规则rulesAddData:{title:[{required:tru
尔嵘·2020-08-13 12:21

vue+element表格添加删除编辑

介绍之前做的用户列表功能，抽出来了删除，新增，编辑等功能，可直接使用。效果图实例新增批量编辑批量删除{{scope.row.name}}{{scope.row.sex}}{{scope.row.phone}}{{scope.row.date}}{{scope.row.show?'保存':"编辑"}}删除importVuefrom'vue'exportdefault{data(){return{ta
G_ruirui·2020-08-13 11:22

vue+element实现批量删除

表格代码如下：主要是@selection-change="selsChange"//复选框//id定义显示值data(){return{sels:[],//选中的值显示}}选中时触发selsChange(sels){this.sels=sels},批量删除按钮disabled设置是否可用批量删除绑定事见deleteFileOrDirectory(){varids=this.sels.map(ite
z_victoria123·2020-08-13 11:00
上一页 10 11 12 13 14 15 16 17 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他