![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
HainesFreeman
function
展开
-
基于vue2 + element实现的一个table表格,模拟实现数据,比如用户列表,然后进行前端分页
基于vue2 + element实现的一个table表格,模拟实现数据,比如用户列表,然后进行前端分页,写一个这样的组件案例。这个组件可以作为一个基本的分页表格组件使用,适用于展示大量数据时的前端分页场景。原创 2024-07-08 10:51:50 · 307 阅读 · 0 评论 -
vue2 + element三级菜单实现模板
需要一个含有三级菜单的结构模板,用于业务快速开发。原创 2024-07-03 10:58:31 · 284 阅读 · 0 评论 -
vue2组件内部获取路由前后变化
在账户列表页面,需要检测路由变化进行拉取用户数据,不在mounted里面写,就是要检测路由变化并且要获取前后路由的路径,进行一些逻辑的判断。原创 2024-06-27 11:18:40 · 192 阅读 · 0 评论 -
vue输入框只限制输入小写字母以及数字正则
vue输入框只限制输入小写字母以及数字正则原创 2024-04-26 10:28:06 · 283 阅读 · 2 评论 -
You may need an additional loader to handle the result of these loaders.
You may need an additional loader to handle the result of these loaders.原创 2023-03-28 19:01:33 · 94 阅读 · 0 评论 -
element-table 隐藏某几行
element-table 隐藏某几行原创 2022-11-15 11:41:04 · 3528 阅读 · 0 评论 -
overflow-x:auto无效!!!
overflow-x:auto无效!!!原创 2022-11-07 16:59:22 · 728 阅读 · 0 评论 -
::v-deep和/deep/区别
::v-deep和/deep/区别原创 2022-10-31 15:50:36 · 778 阅读 · 0 评论 -
vue-print-nb实现页面打印,如何隐藏打印打印区域中的某个div?
vue-print-nb实现页面打印,设置好打印区域后,如何隐藏打印区域中的某个div?原创 2022-10-20 08:51:37 · 2295 阅读 · 0 评论 -
JS数字转中文大写
JS数字转中文大写原创 2022-10-17 10:59:24 · 164 阅读 · 0 评论 -
vue实现每隔3s请求一次接口,返回成功则停止请求
vue实现每隔3s请求一次接口,返回成功则停止请求原创 2022-09-20 22:55:47 · 2561 阅读 · 0 评论 -
使用canvas画一个流星动画送给她吧
canvas画一个流星动画原创 2022-09-20 14:38:04 · 189 阅读 · 0 评论 -
axios设置请求头token的方法
问题:笔者以前也没有使用token放在header里面请求接口,使用axios请求的。踩坑记录一下swagger解决:let token = _.getStore("tz_token");axios.defaults.headers.common['token'] = token;踩坑:axios.defaults.headers.common['token']是...原创 2019-01-14 11:58:11 · 38844 阅读 · 1 评论 -
el-table-column数据列错位
el-table-column数据列错位,element表格错位原创 2022-09-16 17:44:05 · 1040 阅读 · 0 评论 -
at packages/date-picker/src/picker.vue 出现父子组件传值违反单向数据流,原因使用element ui 2.15.9中datepicker日期组件 报错以解决如下
element ui 2.15.9中datepicker日期组件报警告原创 2022-09-14 20:45:09 · 572 阅读 · 0 评论 -
vue项目进行前端埋点,记录页面菜单停留时间
vue项目进行前端埋点原创 2022-08-26 11:36:00 · 2106 阅读 · 1 评论 -
在 vue 中使用 vue-typed-js 实现打字机效果
1、实现打字机效果:一个字一个字出现,再一个字一个字消失,如此循环。2、安装 vue-typed-jsnpm install --save vue-typed-js3、使用import Vue from 'vue'import VueTypedJs from 'vue-typed-js' Vue.use(VueTypedJs)首先是<template></template>标签里的代码,代码如下所示:其中,loop为true是为循环执行;stri原创 2022-05-26 22:25:32 · 2859 阅读 · 5 评论 -
vue-json-viewer实现JSON效果【高亮、可折叠、可复制】
利用vue-json-viewer插件,利用这个插件,可方便快速实现 高亮,JSON折叠,copy 三种功能 !!!官网地址:https://www.npmjs.com/package/vue-json-viewer效果展示先放最终效果:效果看完,那么我们来上干货了!安装vue-json-viewer插件基于npm的安装:$ npm install vue-json-viewer --save基于yarn的安装:$ yarn add vue-json-view..原创 2022-03-02 11:41:03 · 4034 阅读 · 0 评论 -
vue操作日志-json可视化样式
效果:代码:<template> <PageWrapper> <PageContentWrapper> <el-form :inline="true" ref="form" :model="filterParams" class="demo-form-inline"> <el-form-item label="选择操作模块"> <el-select原创 2022-02-24 13:28:50 · 1569 阅读 · 0 评论 -
vuedraggable怎么设置把两个区块直接禁止拖拽?
答案:设置group属性不同的值,即可。代码参考:<template> <div> <!--使用draggable组件--><div class="itxst"> <span>A、B列可以相互拖动,无法拖到C列</span><div class="col"> <div class="title" >A列</div> <draggable v-model="arr1"原创 2022-01-19 13:51:57 · 2002 阅读 · 1 评论 -
Element UI表单校验之动态表单校验的坑
<template> <!-- 这里总结的是关于element UI 表单校验中遇到的案例--> <el-form :model="formData" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="left"> <el-form-it...原创 2021-12-17 10:03:20 · 240 阅读 · 0 评论 -
element的表头无法更新问题,数据确实更新了
问题:element的表头是从后端动态拿的,第一次渲染没有问题,可是再根据不同的条件查询的时候,传参不同,意味着返回的表头不同,这个时候,数据从后端其实已经拿到了,但是页面视图就是无法更新,真的恶心坏了,试验了很多种方法,包括使用key啊什么,都不行,最终找到一个间接解决的方案,即:使用v-if的方法,让DOM重新渲染。解决:原来的代码: <el-table v-loading="isLoading" :data="tableData" bo原创 2021-12-15 20:31:41 · 2292 阅读 · 0 评论 -
Element Backtop回到顶部的具体使用
<template> <div id="app"> <router-view /> // 绑定app盒子 <el-backtop target="#app" :visibility-height="100"></el-backtop> </div></template> <script>export default { name: "App", data() { return {.原创 2021-12-15 14:17:54 · 760 阅读 · 0 评论 -
导出excel,后端返回blob文件
async down() { try { const params = { days: this.queryForm.date.join(','), appid: this.queryForm.appid.join(','), type: this.queryForm.type.join(','), adchannelid: this.queryForm.adchannelid.join(','), sdkVersion: this.que..原创 2021-11-11 17:29:17 · 989 阅读 · 0 评论 -
vue输入框限制数字
<el-form-item> <el-input v-model.number="child.sort" class="w100" maxlength="10" @input.native="checkoutNumRange($event,0)" oninput="value=value.replace(/[^\d]/g,'')"></el-input></el-form-.原创 2021-11-05 11:46:50 · 612 阅读 · 0 评论 -
彻底弄懂vue接口代理
1.开发环境下,把baseUrl设置为空。 baseUrl:''2.设置proxy devServer: { // before(app) { // mock(app) // }, open: false, // 自动打开浏览器 port: 8086, // 端口 proxy: { '/api': { target: 'http://youke-api.st1.2345.cn', // 这里可以指向本地mock的服务,原创 2021-07-02 17:40:15 · 1075 阅读 · 0 评论 -
new Vue() vs createApp()
从一个入口开始vue3从发布正式版到现在已经过去半年左右,大家聚焦讨论的重点集中在响应式api 和组合式api,无可厚非,这俩个api的变化确实可以直接影响到整个vue应用的开发方式和体验,今天我们来谈一个不那么起眼的小知识点相信大家在使用vue-cli脚手架开发vue应用的时候,一定在src/main.js里见过这样的代码new Vue({render: h => h(App)}).$mount('#app')一切从new一个vue实例开始,然后当你使用vue3进行开发的时..原创 2021-06-25 09:02:05 · 1548 阅读 · 0 评论 -
vue脚手架创建项目git bash无法箭头选择
第一种比较简单,就是将vue create命令改为winpty vue.cmd create命令原创 2021-06-10 14:55:28 · 240 阅读 · 0 评论 -
arr.some使用async只执行一次的问题
// 表单校验 validate () { return new Promise((resolve, reject) => { if (this.subQuantityRadio === 2) { this.subQuantityConfig = [] resolve('子广告位success+ 关闭状态') } else { // 子广告位开启状态 let c...原创 2021-06-03 17:47:24 · 348 阅读 · 0 评论 -
window.open在safari浏览器跳转被拦截问题
解决方法: async getToken(row) { // 兼容safari浏览器跳转拦截 let tempwindow = window.open() try { const params = { uid: row.id, } const res = await this.$api.getAdminLoginToken(params) if (res.code === 0) ..原创 2021-05-28 14:10:23 · 748 阅读 · 0 评论 -
vue学习总结
1.public放进去的文件webpack不处理,assets会被编译处理2.devServe里面的before(app),app是express的实例3.引入资源的时候,注意绝对路径和相对路径,绝对路径以/img/a.png这样,相对路径: ./img/b.png,绝对路径会从静态服务器里面查找,相对路径则不是,vue的开发环境下的静态服务器是以public作为根目录来的。4。...原创 2021-05-26 09:26:58 · 82 阅读 · 0 评论 -
vue-cli项目中——跨域之proxyTable——在开发和生产环境的不同配置
一、问题背景利用proxyTable配置之后,编译后生产环境部署失败二、解决过程解决跨域问题又多种方法,网上又很多资料我就不再一 一列举了,直接上proxyTable的配置,我的项目是基于vue-cli脚手架搭建的,找到config/index.js中关于开发环境的配置,增加对proxyTable属性的配置,如下图所示:利用axios发送请求的url都要在前加/api前缀,ok没问题,跨域成功解决,查看请求:但编译打包放置到服务器端时,却发现报错了,请求的url前都有...原创 2021-05-24 17:31:07 · 569 阅读 · 0 评论 -
循环表单校验,只要有一个不符合条件,则中断循环
1.场景:一个循环的表单,需要校验以下内容:-至少添加一项广告源-至少填写排序字段-至少填写排序-只要有一项不符合,则中断循环,不往下执行下去,所以不用forEach(),采用some()方法,some方法只要return true,则终止循环如下图:2.解决方案: // 表单校验 validate () { return new Promise((resolve, reject) => { const messag...原创 2021-05-18 14:04:12 · 1176 阅读 · 0 评论 -
外部环境打开微信
window.location.href ='weixin://dl/business/?t=WwvPQbN1WHl'原创 2021-05-11 10:38:24 · 422 阅读 · 0 评论 -
修改element多行文本框的placeholder字体和颜色
<style scoped lang="scss">/deep/.el-textarea input::-moz-input-placeholder { font-family:"Microsoft"; color:#C0C4CC;}/deep/.el-textarea__inner::-webkit-input-placeholder { font-family:"Microsoft"; color:#C0C4CC;}</style>原创 2021-05-10 18:34:40 · 1679 阅读 · 0 评论 -
美化element中的el-table滚动条
el-table设置height后,数据越界的时候会显示垂直滚动条,但是那个滚动条是真的丑给el-table添加classs随便写个名字,此处用的是bueatyScroll/**改变浏览器默认的滚动条样式*/.bueatyScroll .el-table__body-wrapper::-webkit-scrollbar-track-piece { background-color:#f8f8f8;}.bueatyScroll .el-table__body-wrapper::-w...原创 2021-04-27 15:40:24 · 1475 阅读 · 0 评论 -
vue项目中使用 nprogress 插件
nprogress 插件是在页面刷新和跳转时出现在浏览器顶部的进度条,它会随着页面的加载而显示进度状态。可在官网查看相关效果。在vue项目中使用 nprogress 插件1.安装:npm install --save nprogress2.在 src -> utils 文件夹下创建 nprogress.js 文件import router from '@/router' // 必须引入routerimport NProgress from 'nprogress'import '.原创 2021-04-26 13:45:45 · 794 阅读 · 0 评论 -
element上传组件
<template> <div class="upload-app-wrapper"> <el-upload class="avatar-uploader" ref="upload" accept=".jpg, .png, .gif" :action="`${origin}${action}`" :data="params" name="fileKey" :headers="hea.原创 2021-02-24 16:54:12 · 106 阅读 · 0 评论 -
json可视化在vue应用中的实现
实现效果:json可视化化代码:1.首先先下载好JsonView的组件:JsonView.vue,组件代码如下:<template> <div class="bgView"> <div :class="['json-view', length ? 'closeable' : '']" :style="'font-size:' + fontSize+'px'"> <span @click="toggleClose" :class.原创 2021-01-25 13:12:55 · 5365 阅读 · 0 评论 -
0-100
checkoutNumRange(e) { if (e.target.value < 0 || e.target.value > 100) { this.$message.warning('只能输入[0,100]区间的整数') e.target.value = '' } }, <el-input v-model="news.score" placeholder..原创 2020-12-28 15:44:49 · 115 阅读 · 0 评论