element
深圳最菜的前端
这个作者很懒,什么都没留下…
展开
-
关于elemet-ui升级版本导致el-table不展示这个事
背景:5年前的老项目了,然后新增了需求起因:然后我顺手就引用了一个叫做el-description的描述组件,然后就写完了业务,然后本地调试了一下,咦,没展示,一看报错信息,然后顺手就升了个级,因为使用这个组件,要2.15.6以后才能用经过:本地调试,没问题,真是一次完美的迭代,虽然在五年前的屎山里面遨游了一下,但是问题不大,然后熟练的git add. / git commit -m "xx功能新增 / git pull / git push /",然后在Jenkins上打包,开始摸..原创 2022-05-23 14:13:50 · 1201 阅读 · 0 评论 -
对循环出来的表单,进行校验
如图所示重点代码: props<template> <el-form :model="form" ref="ruleForm" label-width="100px"> <el-form-item label="负责人" prop="principal" :rules="rules.principal"> <el-input v-model="form.principal"></el-input> </e原创 2022-03-28 14:18:29 · 1256 阅读 · 0 评论 -
el-table合并单元格的正确食用方法
如图所示,当前的表格hover效果的时候,变成了选中2行原创 2022-03-08 14:22:10 · 2292 阅读 · 0 评论 -
vue实现伪3D切换滚动(附代码)
今天写项目,遇到一个滚动需求,贴出来,做一个记录这个是最终的一个效果,点击左右小箭头,实现滚动效果原创 2021-07-12 11:08:32 · 949 阅读 · 0 评论 -
vue-filter全局和当前页面使用情形
一般在vue项目中,使用filter过滤器,有全局和局部两种使用方式局部使用实现一个效果,将实时输入的英文首字母变成大写,如果有空格,就空格后第一个首字母大写// index.vue<template> <el-input v-model="input" placeholder="请输入内容,如果连续输入,请以空格隔开" style="width: 300px"></el-input> <span>{{ input | capitalize原创 2020-12-07 17:32:48 · 274 阅读 · 0 评论 -
Vue中登录成功保存token,并每次请求携带并验证token
在登录请求成功后,会返回一个token值,用loaclStorage保存localStorage.setItem('token',res.data.token)一般会在main.js或者是单独的request.js中设置全局请求头和响应回来的判断//设置axios请求头加入tokenAxios.interceptors.request.use(config => { if (config.push === '/') { } else { if (localSt原创 2020-11-19 14:49:32 · 2950 阅读 · 0 评论 -
VueX(Vue状态管理模式)
一、初识VueX1.1 关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。1.2 安装由于VueX是在学习VueCli后进行的,所以在下文出现的项目的目录请参照VueCl原创 2020-10-13 16:44:01 · 294 阅读 · 0 评论 -
vue + element + echars柱状图
今天写管理后台,用到了一个echarts柱状图,要求在tooltips鼠标悬浮的时候,自定义展示内容如图所示:在原本的tooltips中,展示内容只有对应的数据,没有后面的百分比,这个时候就需要自定义了思路:在echars中,tooltips有一个属性叫做formatter,一般都是默认,但是它是可以写成一个方法,就是在回调中去拿到当前柱状图的所有数据信息,然后在回调里面用模板字符串来实现自定义展示内容,因为我这边业务,数据是固定的四条,所以就直接就用params[0],这种方式来取到对应的值,原创 2020-10-13 16:01:57 · 1503 阅读 · 0 评论 -
element Table el-tooltip
今天实现一个功能,要在table表格做一个el-tooltip大概长这样然后贴一下代码,做一个记录<el-table :data="statisticsTable" border style="width: 100%" :default-sort="{order: 'descending'}" @sort-change="changeStatistics"> <el-table-column fixed prop="storeName" label="门店名称" />原创 2020-09-18 17:20:12 · 2328 阅读 · 0 评论 -
vue储存storage时含有布尔值的问题
今天遇到一个问题,需要将后台返回的true和false存到storage中去,然后用储存的这个值进行逻辑判断,但是一直判断都是错误的,后面查阅了一下资料才发现在localstorage中储存数据的时候,储存的boolean值都会变成字符串,而不是刚开始储存进去的boolean值都变成了字符串那么怎么解决呢一:前端进行一次转化if (localStorage.getItem('布尔值') == 'true') { // 重新赋值为新的值 '布尔值' = true}或者是在储存的时候,原创 2020-08-15 15:55:03 · 927 阅读 · 0 评论 -
this.$set() vue + element
这几天写管理后台,遇到一个问题,刚好记录一下以下是功能截图这个功能是放在一个弹窗中的,截图的位置是一个数组,点击添加一个tag,就新增一个对象,删除tag,就删除了这个数组对应的那个对象,关闭弹窗的时候,需要将整个数组清空,并且还原成图一的样子// 点击新增tagaddStep: function () { this.form.experts.push({ fileLists: [], avatar: '', name: '',原创 2020-08-13 10:20:16 · 1058 阅读 · 0 评论 -
[Vue warn]: Cannot read property ‘getAttribute‘ of null“
今天遇到一个这个问题记录一下运行vue出现的问题,后面网上搜了一下,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的说直接点就是加载顺序的问题,然后找到了一个解决办法,使用vue的ref和$refs来解决一般的写法,都是使用ID去绑定,比如// html<div id="charts"> // xxxx</div>// jsdrawCharts () { let previewChart = this.$echarts.init原创 2020-08-06 15:36:14 · 1145 阅读 · 0 评论 -
element实现input搜索提示以及多选
接到一个需求,做一个筛选功能,要求门店多选,并且有搜索提示最后的效果图如下多选的功能还是比较简单的,element有一个tag标签,直接把选中的值push到tag数组就可以了,给后台返回,只需要返回选中的tag标签的数据就好至于搜索提示,以前没有做过,所以做下记录在官网,给了一个demo,在demo中,有这么一个钩子 mounted() { this.restaurants = this.loadAll();}回显的数据是直接写到loadAll中的,但是,我们的数据是请求以后才能拿到原创 2020-06-28 15:58:06 · 4203 阅读 · 1 评论 -
一些数据处理的小技巧(持续更新)
使用场景一:新增在vue + element管理后台中,使用下拉框,下拉框数据是从后台拿到的,但是参数不够,得前端重构一下数据// 后台返回这么一个数组,是下拉框的数据data:['百度', '腾讯' , '360' , '搜狐']看看官方demo,但是使用element的下拉框的时候,是需要value和label两个值才行export default { data() { return { options: [{ value: '选项1原创 2020-06-12 16:57:45 · 265 阅读 · 0 评论 -
基于vue使用canvas的小demo
今天接到一个需求,在vue+element管理后台中新增一个保存canvas图片的需求,所以先写了一个小demo// html中<div class="contain"> <canvas id="myCanvas" width="500" height="500" ref="myCanvas"></canvas> </div>// js中drowCanvas () { let myCanvas = this.$refs.myCanvas原创 2020-05-28 14:19:26 · 3144 阅读 · 0 评论 -
vue + echarts数据实时更新
今天在管理后台新增一个图表,用了echarts,记录一下根据数据实时更新安装npm install echarts --save然后在main.js中配置一下import echarts from 'echarts'Vue.prototype.$echarts = echarts可以了,接下来就是在你需要用的页面写了// html 宽高还是尽量固定吧,不然会出现一些奇奇怪怪的问题<div id="previewChart" :style="{width: '600px', hei原创 2020-05-22 17:43:13 · 5048 阅读 · 0 评论 -
带你从0到1了解webpack(二)
上一节都简单的搞了一下webpack,让你知道这个玩意到底干啥的但是在正式的开发中,一般都会有更复杂的配置,比如指定打包的输入路径和输出路径在webpack 4.x的版本中默认打包的入口是在src下的`index.js`文件默认的打包的出口是在dist下的`main.js`文件打开项目,在webpack.config.js中,配置下面的代码const path = require('path')module.exports = { entry: path.join(__dirname, '原创 2020-05-21 21:30:15 · 209 阅读 · 0 评论 -
动态修改vue页面title
一,只需要在获取数据的时候,给其进行赋值就可以了// 获取数据getDetail(page, pageSize).then(resp => { if (resp.errCode == 0) { docment.title = resp.data.data.textTitle // 赋值页面数据 }else { this.$message.error(resp.msg) }})二,自己手动写// 在路由中routes: [ { name: 'home' path:原创 2020-05-20 10:28:10 · 725 阅读 · 0 评论 -
在vue中刷新当前页面
在vue管理后台中,对列表进行编辑,删除,新增,都需要更改数据,对列表进行刷新,vue本质就是数据驱动,所以,方法很多一,调用获取列表的接口方法,即可刷新当前列表getListInfo () { // 获取列表数据}// 删除delate () { // 业务逻辑 this.getLinstInfo() // 调用接口刷新数据}...原创 2020-05-20 10:14:03 · 613 阅读 · 0 评论 -
element 清空el-option和清空el-cascader
在vue管理后台页面,增删查改算是常见的需求了,为了偷懒,很多人都会只写一个弹窗,在这个弹窗里面完成新增和修改操作,所以,点击提交的时候清空下拉框数据,就成了必要案例:// html<el-option v-for="item in stores" :key="item.id" :label="item.name" :value="item.id" style="height:68px" > <div>{{ ite原创 2020-05-18 18:41:08 · 8724 阅读 · 9 评论 -
element select选择框修改样式
今天遇到一个需求,需要修改select 下拉菜单的需求,以前改ui框架的样式也不少了,还是轻车熟路,简单粗暴,上来就/deep/深度选择器,保存刷新,发现,并没有修改到,尴尬了,看看css,懵了,select选择器下拉框并没有在body里面,而是和script是平级关系?哈?看看官方给出了两个属性 popper-class(Select 下拉框的类名) popper-append-to-body(是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false)这下就简单多原创 2020-05-14 15:07:00 · 5900 阅读 · 0 评论 -
element多图上传和回显
管理后台列表页,经常遇到一个需求就是多图的上传以及回显,直接来看列子// html代码<el-upload ref="cleanUpload" class="upload-demo" :action="uploadAPIUri" accept="image/jpeg, image/gif, image/png" :headers="uploadHttpHeader" :limit="9" :multiple="true" :on-exceed="ex原创 2020-05-12 15:39:16 · 1360 阅读 · 0 评论