Element
大多都是管理系统
刘斩仙的笔记本
业精于勤,荒于嬉;行成于思,毁于随。
展开
-
el-tree懒加载数据改变后不能实时刷新问题
设置lazy后,加载数据通过load获取,如果外部搜索条件改变,数据源变动后,el-tree仍然是老数据不更新最新数据,因为el-tree加载后会缓存,需要主动设置data去更新最新数据。原创 2024-07-03 17:41:55 · 691 阅读 · 0 评论 -
vue + xtermjs + websocket 前端网页版终端,操作后端的docker容器
vue + xtermjs + websocket 前端网页版终端,操作后端的docker容器原创 2022-11-10 17:10:49 · 5302 阅读 · 11 评论 -
vue中可编辑div添加@功能
简介1.有默认值情况下,光标自动定位到最后2.按@键,或者@+shift组合键,可添加被@姓名3.可整体删除@姓名4.在光标位置插入指定html元素如图所示源码(复制另存txt,修改.html直接运行)<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, in原创 2022-04-19 13:13:34 · 1839 阅读 · 1 评论 -
vue高仿立体卡片效果(第三版)
组件如图所示:使用方法<template> <div class="Home w100 h100"> <!-- tab切换 start --> <tab-card :data="tabArr" class="ml15 mr15 pt15" @tabClick="tabChange"> <p class="pl15 pr15 pt15 pb15" v-show="tabIndex == 0">原创 2022-03-05 11:03:50 · 950 阅读 · 0 评论 -
vue高仿立体卡片效果(第二版)
组件如图所示:下载地址:TAB组件原创 2022-03-05 10:46:24 · 690 阅读 · 0 评论 -
vue组件利用css var(--变量)实现动态修改伪类属性(::before、::after)
如图所示:#1:我们可以利用此属性实现vue组件动态传值,修改例如:::before、::after等,伪类的背景色,背景图等属性值。因为vue利用无法直接在css中使用data里的变量,利用var(–变量名),以及style中定义变量(其实此步是模仿:root{})方能修改。动态切换主题也可利用此方式实现,由后端返回图片地址,以及颜色主题。#2:常规使用方式,但是很尴尬,人们并不喜欢这样写。只有系统性,需要大量修改重复css属性,才会用到这个。代码如下:(复制另存txt,修改.html直原创 2022-01-21 15:44:19 · 10234 阅读 · 1 评论 -
vue高仿立体卡片效果(第一版)
如图所示:代码如下:(复制另存txt,修改.html直接运行)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue高仿立体卡片效果</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/i原创 2021-12-23 16:52:06 · 1552 阅读 · 0 评论 -
动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介:el-table单元格合并,处理hover错乱问题。如图所示:源码(复制另存txt,修改.html直接运行)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table</title> <!-- 引入样式 --> <link rel="原创 2021-12-08 16:18:08 · 2201 阅读 · 3 评论 -
vue解决ie浏览器白屏问题
介绍:情况一:[vuex] vuex requires a Promise polyfill in this browser.情况二:SCRIPT1002: 语法错误的解决情况三:SCRIPT1003: 缺少 ‘:’情况四:缺少 ‘)’解决方法:第一步: yarn add babel-polyfill第二步://修改babel.config.jsmodule.exports = { presets: [ [ '@vue/app', {原创 2021-09-29 17:15:08 · 585 阅读 · 0 评论 -
vue监听div、textarea高度变化执行某个操作 - Vue Element Textarea
简介:监听用户拖动textarea高度变化,实现修改对应div,使二者高度同步。如图所示:源码(复制另存txt,修改.html直接运行)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>监听div、textarea高度变化执行某个操作 - Vue Element Textarea</title> <!-- 引入样式 --> <原创 2021-08-04 13:49:24 · 2428 阅读 · 3 评论 -
导航栏选中 - 自动滚动居中 - Vue Element Menu
效果如下:源码(复制另存txt,修改.html直接运行)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜单选中 - 自动滚动居中 - Vue Element Menu</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui原创 2021-07-23 14:57:06 · 3040 阅读 · 0 评论 -
vue实现钉钉扫码登录
如图所示:代码如下://在public/index.html引入钉钉js//需注意如果报错DDLogin未定义,需要将此代码放入head中或者body中,放在body-html标签之间有些项目会报错。<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>//html// id必写,style是为了调整二维码大小,二维码官方固定尺寸,只好出此下策。<div原创 2021-03-02 13:48:27 · 6398 阅读 · 7 评论 -
vue中axios的post请求url自动带上本地ip解决方法
描述解决方法1.URL地址错误,https://或者http://写错了。(占比90%)2.URL地址正确,但是 VUE_APP_BASE_API = ‘http://10.196.33.41:8082/crm-admin’ 前后有空格,去掉空格就好了。ENV = 'development'# base api(此处不能有空格)VUE_APP_BASE_API = 'http://10.196.33.41:8082/crm-admin'(此处不能有空格)...原创 2021-01-05 09:31:09 · 6489 阅读 · 5 评论 -
我的vue学习日记(一)——后台管理系统(vue+vuex+axios+iview+router)
效果如图: 介绍: 1.创建vue项目//桌面打开命令窗口 npm和cnpm都行,建议cnpm快很多,还不容易出错(前提是你安装了淘宝镜像cnpm)cnpm install -g vue-cli //建好了,cd..到work文件夹(我的是work)vue init webpack Vue-Project //Vue-Project是项目名字(work文件夹下执行) ...原创 2018-08-01 13:08:05 · 8547 阅读 · 2 评论 -
我的vue学习日记(二)——后台管理系统(vue+vuex+vue-cli+element+axios+router)
效果如图:(结尾附上GitHub地址)PCMOBILE介绍:一、权限系统动态路由动态左侧菜单栏二、基础页顶部搜索 / 列表 / 底部分页三、动态表单及其验证多个input循环加载单个input循环加载四、图片预览使用方法五、导出使用方法一、权限系统动态路由备注: 起初,我想使用跟ant design pro权限类似做法,前...原创 2019-07-22 11:43:33 · 2462 阅读 · 2 评论 -
vue+element 表单BUG记录
介绍:复现:一般都是表单中,二级联动或者三级联动,使用change方法改变form:{ name:’’ }中的属性;1.视图不更新2.el-select下拉全选;针对问题一解决方法://使用$setthis.$set(this.newTeam,"provinceId", '')this.$set(this.newTeam,"province", '')//下面这个会不生效,导致表...原创 2020-04-21 15:05:14 · 346 阅读 · 0 评论 -
vue+element 上传
单个上传:效果如图:html:<el-form :model="newTeam" status-icon :rules="newTeamRules" ref="newTeam" label-width="120px"> <el-Row> <el-form-item label="上传头像:" prop="headUrl" size="small" :...原创 2020-04-07 20:07:02 · 265 阅读 · 0 评论 -
vue+element 表单
1.验证手机号/电话/身份证//html<el-form :model="newForm" status-icon :rules="newRules" ref="newForm" label-width="100px"> <el-Row> <el-Col :span='24'> <el-form-item label="机构电话"...原创 2019-10-23 17:26:25 · 341 阅读 · 0 评论 -
vue+element 动态加载表单
1.编辑表格<el-table-column prop="sort" label="排序" align="center"> <template slot-scope="scope"> <span v-show="NoEdit != scope.row.relationshipId">{{scope.row.sort}}<i class="e...原创 2019-05-21 14:08:07 · 1310 阅读 · 0 评论 -
vue+element NavMenu 导航菜单 选中状态失效 解决方法
问题:左侧菜单,选中状态失效,1.路由跳转过来,选中失效;2.刷新页面失效解决方法1.路由跳转(NavMenu子菜单没有v-if)+刷新app.vue//html<el-menu router ref='menu' :default-active='$route.path' class="el-menu-vertical-demo" backgrou...原创 2019-06-06 16:14:03 · 9103 阅读 · 0 评论 -
vue+element 下载or批量下载.mp3文件
1.后台分页版<template><!-- 通话回推列表 --> <div class="CallList" v-loading="loading"> <el-row :gutter="12" class="mt10"> <el-col :span="24"> <el-card shad...原创 2019-06-06 15:53:14 · 2723 阅读 · 2 评论 -
vue+element 表格
<el-table-column prop="sort" label="排序" align="center"> <template slot-scope="scope"> <span v-show="NoEdit != scope.row.relationshipId">{{scope.row.sort}}<i class="el-icon-...原创 2019-06-06 15:09:11 · 629 阅读 · 0 评论 -
vue+element WebSocket
//app.vue<template> <div id="app"> <div class="fr cursor"> <!-- 工单提醒 start--> <el-badge :is-dot="showMsg" class="item"> <i class="el...原创 2019-10-23 18:42:33 · 1685 阅读 · 0 评论 -
vue+element 登录超时自动退出
一、超时以后自动退出<template> <div id="app"> <router-view /> </div></template><script>let time = nullexport default { name: "app", data() { return { ...原创 2019-10-23 19:03:25 · 1968 阅读 · 0 评论 -
axios记录
1.GET//加tokenthis.$axios.get(that.$my.api + '/bms/changStatus?id='+id,{headers:{token:JSON.parse(localStorage.getItem('userInfo')).token}}).then(res => { if(res.data&&res.data.code =...原创 2019-08-22 09:52:17 · 189 阅读 · 0 评论 -
Vue 选项卡
方式一单独组件,切换的是不同的组件 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,mini原创 2018-07-19 14:41:56 · 1116 阅读 · 0 评论