前端框架
白枫 White Maple
没有
展开
-
vue+elementUI el-select 搜索下拉框数据过多 分页加载
需求描述:下拉框获取的数据过多,需要对数据进行分页加载,下拉刷新数据关键词:Select 选择器 InfiniteScroll 无限滚动<el-form-item label="项目名称" prop="name" > <el-select v-model="form.name" placeholder="请选择项目名称" filterable原创 2021-09-24 17:21:37 · 2725 阅读 · 0 评论 -
element upload 上传图片闪烁的问题
一个样式修改解决问题,棒呆!!<style lang="scss" scoped>/deep/ .el-upload-list__item.is-ready { display: none;}</style>原创 2021-05-26 15:41:26 · 1853 阅读 · 3 评论 -
安装 npm install -g vue-cli 报错 ‘proxy‘ config is set properly. See: ‘npm help config‘
今天电脑重新更新后,发现安装vue项目进行npm时总是报'proxy' config is set properly. See: 'npm help config' 的错然后查了资料是因为代理出了问题导致的报错,解决方法就是直接设置新的代理先查找一下自己的代理npm config get proxynpm config get npm config get https-proxy然后将代理和缓存置空第一种:npm config set proxy falsenpm ca.原创 2021-04-11 19:56:20 · 8450 阅读 · 1 评论 -
vue 搜索的回车搜索功能的几种方法
1.第一种情况,input框<input @keyup.enter="function">2.在自己封装的组件或者是使用一些第三方的UI库时,会发现并不起效果,这时就需要用到.native修饰符了<el-input @keyup.enter.native="function" />3.如果想要绑定的组件太多,可以对键盘进行监控 mounted() { // 绑定enter事件 this.enterKeyup(); }, destr.原创 2020-07-24 14:01:46 · 1180 阅读 · 0 评论 -
el-cascader 级联选择器 总结
1.组件使用图片展示:代码展示:<template> <div class="home"> <el-cascader ref="myCascader" v-model="form.id" :placeholder="form.name" :options="options" :show-all-levels="false" :props="{ value: 'id', labe原创 2020-11-23 16:15:11 · 4451 阅读 · 0 评论 -
vue form表单父页面对子组件进行校验
在做vue项目时,pc端经常会有这样的需求:在不页面对多个子组件中的form表单字段进行校验。解决这个需求的方法:在每个子组件中写入form表单的校验方法,在父页面对子页面中的校验方法进行调用。子组件页面...原创 2020-11-10 10:18:33 · 5947 阅读 · 8 评论 -
vue element 前端的分页
前提:一般的列表分页,都是通过后台返回的数据进行分页的,但是有的表格数据需要先在前端处理,在保存之前不经过后台接口存储,这是就需要前端进行分页处理代码:用slice截取const from = (this.currentPage - 1) * this.pageSize 拿到开始截取的下标const to = this.currentPage * this.pageSize 拿到停止截取的下标this.tableData = [] //tableData 是展示的数组 totalLis原创 2020-08-14 10:08:58 · 230 阅读 · 0 评论 -
vue elementUI 关于表格的多选总结
前提:在做后台管理系统时,有好多有关表格的操作都需要用到多选框,经常用的时elementUi,现在进行总结示例图:总结:1.在列表第一列添加多选框,按照组件一步步来,multipleSelection中就是选中状态的数据2.如果表格中有分页,需要在翻页的时候记住上一页面选中的数据3.取消选中状态(1)需要去掉某些行的选中状态(不是全部)前提:使用方法:this.$refs.multipleTable.toggleRowSelection(th原创 2020-08-13 15:02:28 · 5389 阅读 · 0 评论 -
关于vue-router的缓存---------keep-alive 的使用
需求:后台管理系统的列表页和详情页的跳转,从详情页面跳转回列表页面,希望可以保存列表页面之前的状态(搜索项和分页)分析:想要同时保存搜索项里面的内容和分页的页码数以及搜索出的列表内容,并且不用刷新,用vue-router 的keep-alive可以很好的解决解决历程:1.给需要缓存的路由加keepAlive:true2.在路由出口加判断app.vue,只缓存keepAlive为true的路由 <keep-alive> <ro.原创 2020-07-27 17:26:47 · 885 阅读 · 0 评论 -
vue less的安装与使用总结
问题:在vue项目中加入css样式时,引入了less报错起因:<style lang="less" scoped>错误描述:错误原因:因为没有配置相关依赖,导致css解析出错解决方法:分析自己的css语言,判断安装less还是sass,也可以都安装安装 less 和 less-loader:npm install --save-dev less-loader less安装sassnpm install sass sass-loader --save-dev如果npm原创 2020-06-03 11:23:58 · 1566 阅读 · 0 评论 -
VUE + element ------ (一) 搭建vue项目
1.检查电脑中的node和npm,没有的话就去安装node.js。网址:https://nodejs.org/zh-cn/node -vnpm -v2.为了提高效率,我们可以安装npm的淘宝镜像cnpm:npm install -g cnpm –registry=https://registry.npm.taobao.org3.全局安装vue-clinpm instal...原创 2020-04-12 14:56:57 · 255 阅读 · 0 评论 -
element的表格单选设置
element的表格单选设置代码:<el-table ref="singleTable" :data="tableData" border highlight-current-row @current-change="handleCurrentChange" > <...原创 2020-04-13 15:36:50 · 2770 阅读 · 2 评论 -
手机app---样式调整总结
1.封装公用的样式例如:直接定以/*颜色*/.c000{color:#000000}.cFFF{color:#FFFFFF;}.cBBB{color:#BBBBBB;}通过方法解析/*字体*/@for$ifrom8through40{.fs#{$i}{font-size:#{$i/20}rem;}...原创 2020-07-13 18:50:33 · 931 阅读 · 0 评论 -
前端项目的准备
1.需要下载安装git2.安装git的使用工具,一般使用SourceTree注:SourceTree的免登陆安装,按照百度,在C:\Users\sn\AppData\Local\Atlassian\SourceTree文件下将accounts.json新建加入注意:一般新建的文档会隐藏.text属性,需要显示属性,确保文档是.json文档3.在gtiLab中拉去项目的git地址4.在So...原创 2020-03-30 11:13:37 · 194 阅读 · 0 评论 -
前端加空格
1.html中加空格: <span>{{ scope.row.chargeModeValue }}, {{ scope.row.contactsTypeValue }}必填, </span>2.方法中输出的字符串加空格, 没用,需要用\xa0changeString += val.na...原创 2020-03-30 11:12:15 · 4699 阅读 · 0 评论 -
vue 日期不能选择某一天之前的日期
vue 日期不能选择某一天之前的日期(合同的续签)1.在组件中添加方法,:picker-options="pickerOptions"<el-date-picker v-model="form.renewEndDate" :picker-options="pickerOptions" type="date" placeholder="选择日期" va...原创 2020-01-07 16:56:12 · 2255 阅读 · 0 评论 -
vue---- 日期不能选择今天以后的
日期不能选择今天以后的举例:选择出生日期的时候,不能选择当天之后的日期,不符合常理vue+element的解决方法<el-date-picker v-model="clientBirthday" :picker-options="pickerOptions" type="date" value-format="yyyy-MM-dd" placeho...原创 2020-01-07 16:56:36 · 1653 阅读 · 0 评论 -
异步获取数据同步获取
异步数据转化为同步数据处理的两种情况:第一种:定点定时将异步转化为同步举例:在A方法中的某处需要调用B方法,并且在拿到B方法的返回值后,才可以继续完成A方法中剩下的功能,但是js的代码是从上至下的运行,会出现B方法还没有走完,A方法的代码已经开始往下走,会拿不到B方法的返回值,这个时候就需要异步获取(A调用B 有一定的位置和时间限制)代码举例:A () { ....... ...原创 2020-08-13 10:58:58 · 2677 阅读 · 0 评论 -
git的命令行解决冲突
一:在拉取代码后,出现冲突后,在命令行进行下面几步解决冲突(2.4.5)1.git status用于显示工作目录和暂存区的状态。使用此命令能看到那些修改被暂存到了, 哪些没有, 哪些文件没有被Git tracked到2.git stash当要记录工作目录和索引的当前状态,但想要返回到干净的工作目录时,这个命令所储藏的修改可以使用git stash list列出(将自己有冲突的代码先...原创 2020-03-30 11:15:09 · 1255 阅读 · 0 评论 -
表格中某列的合并
相同列的合并代码:// 设置合并行数据 setSpanArr() { let spanOneArr = [] let concatOne = 0 this.tableData.forEach((item, index) => { if (index === 0) { spanOneArr.push(1) ...原创 2020-08-13 11:00:29 · 222 阅读 · 0 评论 -
vue框架---父子组件传值
父子组件传值父----->子父:<template> <div id="app"> 父组件:<input type="text" v-model="name"/><br /> 父组件:<input type="text" v-model="age&qu原创 2020-03-30 11:20:06 · 80 阅读 · 0 评论 -
vue框架--webpack,HBuilder将vue项目打包成手机app
webpack,HBuilder将vue项目打包成手机app(1)打包注意:A:因为文件中引入了mui,所以需要将mui样式中的svg全部注释掉B:在confing文件夹下的index.js中,assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’在命令行中终止正在运行的操作:Crtl+...原创 2019-08-16 15:39:10 · 267 阅读 · 0 评论 -
vue框架--通过路由跳转页面,并且传递id
通过路由跳转页面,并且传递id需跳转功能的页面: <router-link :to="'/home/paintNation/detail/'+item.id">配置路由:{ path: '/home/paintNation/detail/:id', component: Detail },即将要跳转的页面:...原创 2019-08-16 15:41:12 · 857 阅读 · 0 评论 -
vue框架---连接后台数据库
连接后台数据创建获取后台方法: 2.让页面在初始化地时候就执行这个方法,就是在组件,样式还没有引入的时候就先执行这个方法。3:将数组返回给页面...原创 2019-08-16 15:40:21 · 1224 阅读 · 0 评论 -
项目总结-------父子组件传值
父子组件传值:父组件:第一步:引入子组件的地址:import addCheck from './checkInMana/addcheckInDia'第二步:在components中添加子组件名components :{addCheck}第三步:在页面中引入子组件第四步:父组件给子组件传值:a:在data中声明要传的值return:{addcheckInVisible ...原创 2019-08-16 15:36:53 · 86 阅读 · 0 评论 -
前端路由传值关于--base64加密解密
@author songmengyao 2019-07-03加密解密规则:实现方法base64加密解密所用之处路由切换 query 传参 加密 this.$router.push({ path: '/salesCenter/clientDetails', query: { parm: window.btoa(window.encodeURICompon...原创 2020-08-13 10:56:28 · 756 阅读 · 0 评论 -
路由跳转以及获取取值
路由跳转 并传值:原页面:通过this.router.push中的path跳转页面,通过query传值this.router.push中的path跳转页面,通过query传值this.router.push中的path跳转页面,通过query传值this.router.push({path: ‘/countMana/billManaDetail’,query: {record:recor...原创 2020-08-13 11:01:40 · 1025 阅读 · 0 评论 -
前端遍历的方法
遍历方法:every、some、map、filter1.some():返回一个Boolean,判断是否有元素符合func条件const arr = [1,2,3,4]; arr.some((item)=>{return item>1})打印结果: true2.every():返回一个Boolean,判断每个元素是否符合func条件const arr1 = [1,2,3,4]...原创 2019-08-16 15:46:22 · 215 阅读 · 0 评论 -
vue element 实现下载功能
vue element 实现将页面转化为pdf,并进行下载功能思路:1,利用canvas将页面html转化未图片2,将图片转化为pdf步骤1:安装插件// 第一个.将页面html转换成图片npm install --save html2canvas// 第二个.将图片生成pdfnpm install jspdf --save步骤2:定义全局函数,创建一个htmlToPdf.js文...原创 2019-08-24 10:41:57 · 1021 阅读 · 0 评论 -
VUE框架---创建项目
veu的入门 创建项目步骤:查看node及npm版本node –vnpm-v安装npm淘宝镜像,以后可以直接使用cnpm代替npm 安装淘宝镜像命令:在cmd里直接输入:npm install -g cnpm --registry=https://registry.npm.taobao.org,回车,等待安装…1、 安装全局vue-cli脚手架,帮助搭建所需的模板框架(1) 输...原创 2019-08-16 15:39:53 · 137 阅读 · 0 评论