Vue2
vue2学习及问题记录
前端打工人
这个作者很懒,什么都没留下…
展开
-
Element-plus中 el-button按钮点击之后颜色不还原的问题
的默认策略鼠标按下后处于 focus 状态,也就是看上去没有恢复成原来的颜色(此时是focus样式被激活)。修改这个问题非常简单,不过不应该破坏w3标准的默认策略,因为网页访问者有正常人、残障人、机器人等,可能会破坏其他使用者的操作。第一种方法:可以通过css解决,这样可能会引起一些效果失效,点击之后,再次点击hover效果没有了,link等类型的按钮这样设置无效,不建议修改。经过一番搜索发现问题所在,鼠标点击之后处于focus状态,所以看上去没有恢复成原来的颜色(此时是focus样式被激活)原创 2024-06-24 14:37:18 · 1063 阅读 · 2 评论 -
el-table 多选表格存在分页,编辑再次操作勾选会丢失原来选中的数据
el-table表格多选时,只需要添加row-key及,如果存在分页时需要加上,这里就不写具体的实现方法了,可以查看我之前的文章,这篇文章主要说一下存在的问题。原创 2024-02-27 15:39:01 · 2312 阅读 · 0 评论 -
vue 中 import引入相同的方法名称解决方法
当引入了2个不同的文件,方法名称list都是一样的,就会出现报错。如果之前文件用的地方比较多,直接改名称的话,可能会漏掉,会引起不必要的麻烦,那如何解决呢。原创 2023-06-28 16:45:08 · 2267 阅读 · 0 评论 -
Element ui 修改下拉框 placeholder字体颜色
页面有一个级联选择器,数据是通过接口获取的,在编辑的时候输入框上需要显示选择的名称,因为数据是接口获取的,数据是绑定的id,就导致没有显示上。这里分享一个简单的方法,那就是可以通过 这个障眼法来实现思路:新建时,显示请选择,编辑的时候来修改的值就行了,是不是就达到页面上显示的目的了。又有同学要问了,使用placeholder后,虽然页面显示了需要的数据,但是颜色和别的不一样了,不统一了,还是不完美。呃呃呃呃,那就直接修改placeholder颜色就搞定了。当是新建的时候就使用默认的颜色,如果是编辑的时候就选原创 2022-12-05 18:18:12 · 5073 阅读 · 3 评论 -
antv/G6使用详细介绍,一篇文章说清antv G6如何使用
AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。它是一款国产可视化插件,中文官方文档方便阅读和学习。G6可以实现很多d3才能实现的可视化图表,d3作为一款国外很强大的可视化插件,它的官方文档是非汉语文档,社区虽然很活跃,但几乎是英文文档,阅读和学习起来并不是那么轻松,尤其是英语不太好的同学,阅读和学习d3更吃力。这时候G6就是不错的选择。原创 2022-10-24 13:54:26 · 10458 阅读 · 0 评论 -
vue几行代码实现复制功能,无需安装插件
如果是多行文本,需要保留换行符可以使用textarea标签,input是不会保留换行符的。如果需要插件的同学,可以使用。,自行安装,使用方法。原创 2022-09-27 14:22:07 · 947 阅读 · 0 评论 -
Vue element 表格刷新页面记录当前滚动条位置,并跳转到滚动条位置
需求:当表格有很多条数据,页面有滚动条,需求是当需要刷新组件时导致页面刷新,或者是跳转页面编辑完回来后,需要跳转到当前表格滚动条的位置。方法前记得加个判断,是否有滚动高度,防止报错。1.首先在el-table 绑定。2.添加监听滚动方法。...原创 2022-08-05 16:42:30 · 4990 阅读 · 0 评论 -
Vue + Element 表格拖拽排序、树形表格拖拽排序
今天给大家分享一下表格(列表)及树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用......原创 2022-08-05 14:38:10 · 2843 阅读 · 4 评论 -
Vue 中实现监听keydown快捷键阻止和恢复浏览器默认事件
Vue中实现监听keydown快捷键阻止和恢复浏览器默认事件原创 2022-07-29 15:13:43 · 1232 阅读 · 0 评论 -
element-ui 表格单选及表格多选,设置某些选项置灰禁止选择
element-ui 表格单选、多选功能,设置某些选项置灰禁止选择,methods方法tableRowClassName定义class类名,row是当前行的数据,设置判断条件...原创 2022-07-21 15:45:36 · 10296 阅读 · 1 评论 -
基于Vue+Element-Ui开发的月日组件,可以选择月份和天数小插件(新版本)
最近有粉丝在使用的过程中发现不能满足自己项目上的需求,评论告诉我说不支持以及更改输入框大小,所以又赶紧更新了一个版本,之前是1.0.7,现在新版本为1.1.0,点击查看之前的老版本这个包差不多是2年前上传的...原创 2022-07-01 16:08:13 · 1809 阅读 · 10 评论 -
element的el-table表格自定义表头,slot=“header“数据不更新问题
问题:比如表格表头想增加个图标,或者在表头中使用el-select组件选择不同的状态,就要自定义表头,当点击的时候需要触发数据更新,会出现表头数据不能实时更新的情况解决方法element 官网上el-table上使用插槽 来实现自定义表头,在表头中使用el-select组件选择不同的状态,无法展示选择后的状态,或者其他需要动态更新表头数据,出现无法实时更新,只需要将slot=“header” 改成 ,就可以了...原创 2022-06-24 11:27:01 · 3294 阅读 · 1 评论 -
elementui的下拉框select组件实现可下拉和输入功能
下拉框组件,默认只能下拉选择数据,还可以添加使用搜索功能。如果你想在下拉选择的基础上,再增加一个可以自定义输入的功能,这时候就需要使用一个属性:只需要在下拉框添加 必须有该属性 可直接回车键入...原创 2022-06-08 17:40:57 · 5331 阅读 · 0 评论 -
Vue3.0生命周期、组件通信、自定义指令、插槽、动画、API学习汇总
vue3.0中文文档Vue3.0新特性Composition Api (最核心)v-model更改v-for的key节点上的使用情况更改v-if和v-for对同一元素的优先级更高ref内部v-for不再注册引用数组功能组件只能使用普通函数创建异步组件需要使用defineAsyncComponent创建方法所有插槽都通过$slots在destroyed生命周期的选项已更名为unmounted在beforeDestroy生命周期的选项已更名为beforeUnmount…Vue3.0原创 2022-05-16 16:05:47 · 597 阅读 · 0 评论 -
ElementUI disabled禁用整个form表单,设置单个不禁用
如果你遇到需要把整个form表单都置灰,只保留一个,例:查看时,需要设置置灰显示,但是有个按钮你需要点击,请看下面方法给 el-form 设置了 disabled,要给其中的一个 el-form-item 取消禁用,嵌入一个子 form 就行了。<el-form label-width="100px" :model="form" :disabled="true"> <el-form-item label="禁用:"> <el-button @click=原创 2022-05-12 15:00:27 · 24079 阅读 · 6 评论 -
element-ui使用el-tooltip文本超出时,tooltip文字提示,否则不提示
如果你遇到了vue项目element使用el-tooltip时,超出时显示tooltip提示,不超出内容则不显示,请看下面教程。超出时会显示…,鼠标悬浮出现提示内容,没有超出时,鼠标悬浮不会显示,请看图直接上代码<el-tooltip :content="str" :disabled="isShowTooltip" effect="dark" placement="top" > <div @mouseover="onMouseOver(str原创 2022-05-11 16:34:33 · 7423 阅读 · 2 评论 -
关于Vue你不知道的那点事儿,Vue知识总结大全,让你彻底搞懂Vue
Vue 的最大的优势是什么呢?Vue 作为一款轻量级框架、简单易学、数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快,并且作者是中国人尤雨溪,对应的API文档对国内开发者优化,作为前端开发人员的首选入门框架,Vue 有很多优势:Vue.js 可以进行组件化开发,使代码编写量大大减少,读者更加易于理解Vue.js 最突出的优势在于可以对数据进行双向绑定相比传统的页面通过超链接实现页面的切换和跳转,Vue 使用路由不会刷新页面Vue 是单页面应用,使页面局部刷新,不用每次跳转原创 2022-05-10 15:54:56 · 756 阅读 · 0 评论 -
vue项目性能优化详解汇总
提起性能优化 很多人眼前浮现的面试经验是不是历历在目呢?反正,性能优化在我看来他永远是前端领域的热度之王。先说一下性能优化的方案:一、基础优化(代码以及编码规范)1、v-if 和 v-show 区分使用场景v-if=false时不渲染DOM,v-show会预渲染DOM,v-if 在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建2、computed 和 watch 区分使用场景computed:是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下原创 2022-04-30 09:30:00 · 5186 阅读 · 3 评论 -
Vue.filter过滤器存储单位换算按B、KB 、M、 G显示字节大小
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ mobile | formatmobile}}<!-- 在 `v-bind` 中 --><div v-bind:id="bytesize | formatbytes"></div>在创建 Vue 实例之前全局定义过滤器。在Vue中定义一个f原创 2022-04-29 10:18:56 · 876 阅读 · 0 评论 -
vue中watch监听器的用法,deep、immediate、flush
一、watch 默认是浅层,使用deep深层监听被侦听的 property,仅在被赋新值时,才会触发回调函数——而嵌套 property 的变化不会触发。如果想侦听所有嵌套的变更,你需要深层侦听器:设置deep: trueexport default { watch: { someObject: { handler(newValue, oldValue) { // 注意:在嵌套的变更中, // 只要没有替换对象本身, // 那么这里原创 2022-04-28 14:18:03 · 12428 阅读 · 1 评论 -
element-ui table表格多选框在搜索筛选后保持勾选状态不消失,以及表格多选设置默认选中
开发的时候可能会需要用到搜索表格的情况,搜索后表格勾选的就会消失,而elementul有个属性可以处理这个情况。reserve-selection和row-key搭配使用<template> <span> <el-table ref="multipleTable" :row-key="getRowKey" class="dialog_height" :data="tableData"原创 2022-03-18 11:20:27 · 4470 阅读 · 4 评论 -
Element-ui 给下拉框el-select 的 el-option里加上icon图标
如上图,需要在下拉框中添加小图标,可以使用下面方法,固定的图标直接写死就行了,如果是根据类型显示不同图标,就需要添加判断动态显示了。我这里使用的是svg图标,方法同下<el-select v-model="form.ceshi" clearable> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <span style="fl.原创 2022-02-09 14:46:18 · 9027 阅读 · 7 评论 -
vue element @change事件,change传递多个参数
$event:是当前下拉框所选择的那个值;scope.row:是当前所选行的所有值这样后面就可以添加多个参数了原创 2022-01-13 16:29:05 · 5946 阅读 · 0 评论 -
清除element-ui的el-input-number计数器的默认值
el-input-number默认值为0 的问题很多时候我们需要用到el-input-number来限制输入框智能输入数字,例如价格之类的,但是用了el-input-numer的时候把默认值设为空和null都不生效,默认的值仍然显示0 <el-form-item label="num:" prop="name"> <el-input-number style="width:110px" :min="0" v-model="ruleForm.num" contro原创 2021-10-13 08:54:17 · 5057 阅读 · 0 评论 -
vue实现的前端表格模糊搜索,单个条件及多条件搜索都支持
可以使用watch监听,也可以使用@input下面以watch监听为例单个输入框搜索// filter 是你输入框绑定的值// this.tableData 表格原始数据 this.tableList 深拷贝的一份表格数据// list 通过正则模糊搜索出来的数据watch: { filter (val) { if (val) { let reg = new RegExp(val) let list = this.tableList.filter原创 2021-10-09 10:10:57 · 2562 阅读 · 0 评论 -
解决Element-ui 日期时间组件修改不更新问题
<el-date-picker v-model="formData.answers.time" @input="daterangeChange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picke原创 2021-09-27 14:12:36 · 3772 阅读 · 0 评论 -
解决Vue ElementUi 表格,点击超长的文本,进入下一页面tooltip不消失问题
如下图文本点击进入下个页面后,一直悬浮不显示解决方案:closeTooltip () { let list = document.getElementsByClassName('el-tooltip__popper') if (list.length > 0) { list[list.length - 1].style.display = 'none' } }如果DOM没更新完的,需要加上 this.$nextTick()...原创 2021-09-16 15:19:06 · 1068 阅读 · 5 评论 -
vue element-ui 表格数据时间格式化的方法
如果后端数据是时间戳 /1470220594000/<el-table-column prop="AuditEndTime" label="处理时间" width="120" :formatter="dateFormat" align="center"></el-table-column>主要是:formatter=“dateFormat” 这个属性formatter 用来格式化内容 Function(row, column, cellValue, index)然后在原创 2021-09-01 16:38:25 · 2793 阅读 · 0 评论 -
element 树形控件el-tree展开所有父节点
如果你在使用el-tree组件时,想实现把当前选中节点的所有父节点都展开,可以使用下面方法。<el-tree ref="tree" :data="options" @node-click="handleNodeClick" :highlight-current="true" :current-node-key="activeOption" :props="treeProps" :node-key="treeProps.id"原创 2021-07-09 09:54:32 · 5023 阅读 · 1 评论 -
vue使用$router.push路由跳转后,不能返回问题,以及$route、$router介绍
从A页面跳转到B页面,B页面有子路由,使用$router.push跳转后,点击浏览器返回按钮,发现不能返回到上一个页面(A页面)。解决方法this.$router.push 改为 this.$router.replace两者区别$router.push({path:'home'})本质是向history栈中添加一个路由,在我们看来是切换路由,但本质是在添加一个history记录$router.replace({path:'home'})替换路由,没有历史记录,点击返回,会跳转到上上一个页面。下原创 2021-06-29 09:21:54 · 11276 阅读 · 1 评论 -
使用vite快速搭建vue3项目
注意:Vite 需要 Node.js 版本 >= 12.0.0。使用 NPM:npm init @vitejs/app使用 Yarn:yarn create @vitejs/app然后按照提示操作即可!你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + Vue 项目,运行:# npm 6.xnpm init @vitejs/app my-vue-app --template vue# npm 7+, 需要额外的双横线:npm init原创 2021-06-08 08:49:28 · 1113 阅读 · 0 评论 -
VUE 监听watch 对象某个属性值变化
需求:如果想监听对象 form中 属性 type的变化:<script>export default{ data(){ return{ form:{ name:"", type:"" } } }}</script>一、可以使用watch 结合 computedcomputed:{ type(){原创 2021-05-12 18:17:04 · 2731 阅读 · 0 评论 -
element-UI实现table表格单选及单选点击取消选中
如果你想实现在一个表格中,有个单选的选项,点击可以选中某一行的数据,再次点击也可以取消勾选,那下面这个方法可以满足你的需求。网上很多方法使用都不行,多多少少都有点问题,参照别人的写了一份,自测没有问题,代码你可以再精简一下,我这里就不优化了,如果你遇到这样的需求,请看下面的代码。效果图:点击选中—再次点击取消选中<el-table v-loading="loadingg" :data="tableData" height="100%" style="width: 100%原创 2021-05-10 15:05:18 · 5768 阅读 · 0 评论 -
element-ui 实现el-table表格多选、置灰表格中多选框的某个选项
<el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" :selectable="checkSelectable" width="55"> </el-ta原创 2021-05-07 15:07:00 · 2073 阅读 · 0 评论 -
Vue+Element 多次点击同一导航报错 NavigationDuplicated: Avoided redundant navigation to current location
原因:是指路由重复。虽然对项目无影响,但是看到有红的不舒服!解决方法:打开router文件夹下的index.js文件中添加如下代码:添加下面代码即可解决报错问题//获取原型对象上的push函数const originalPush = Router.prototype.push//修改原型对象中的push方法Router.prototype.push = function push(location) { return originalPush.call(this, location.原创 2021-03-24 14:56:51 · 248 阅读 · 0 评论 -
vue使用element-ui,页面刷新,导航栏选中问题
当你在使用纵向导航时,刷新了页面,左侧导航显示了默认的选项,导航发生了变化,而路由及页面并未改变,那怎么让它选中路由的页面呢:default-active="activeIndex" data() { return { activeIndex: '1', }; },第一种方法:把data中的activeIndex去除,改为计算属性,这一步解决纵向导航栏的问题computed: { activeIndex() { const ar原创 2021-03-24 14:42:30 · 1782 阅读 · 0 评论 -
Echarts 饼图 legend以及series中label文字超长被覆盖解决方法
如果你遇到使用饼状图时,左侧的文字太长会被覆盖,该怎么解决呢方法一:在legend中修改formatter,这个是超出后面添加…legend: { type: 'scroll', scrollDataIndex: 0, orient: 'vertical', left: 10, data: dataName, itemGap: 20, top: 'middle', align: 'left', icon: 'circle',原创 2021-03-23 14:31:03 · 14414 阅读 · 1 评论 -
vue store 存储 dispatch 和 commit的区别
dispatch: 含有异步操作存储:this.$store.dispatch('initUserInfo',friend);取值:this.$store.getters.userInfo;commit:同步操作存储:this.$store.commit('initUserInfo',friend);取值:this.$store.state.userInfo;原创 2021-03-19 15:09:36 · 376 阅读 · 0 评论 -
Element-ui月日组件,vue日期组件,可以选择月份和天数小插件(旧版本)
本组件是基于Vue和Element-ui,因Element官方组件库没有可以选择月份和天数的组件,业务上又有这样的需求,参考网上的文章看了下源码就写了一份这样的插件,保持了原有的风格。本组件可以选择某个月份的某一天,先放图......原创 2021-01-22 11:08:46 · 3125 阅读 · 43 评论 -
element-ui 设置输入框el-input图标
如果你在使用element-ui自定义插件的时候,想保持和element风格一致,需要用到输入框,并且里面有icon小图标,不需要自己手写样式,可以通过下面2种方法实现方法1:<el-form-item label="图标在前"> <el-input v-model="form.name1" prefix-icon="el-icon-search" /></el-form-item> <el-form-item label="图标在后">原创 2021-01-08 15:19:27 · 9408 阅读 · 1 评论