![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
小小米粒吖
这个作者很懒,什么都没留下…
展开
-
Vue3外部插槽替换内部插槽
<template #default="{ data }"> <div v-if="$slots.default == null" style="padding-left: 6px;padding-right: 12px"> <i class="iconfont" v-html="data.code" :style="{color:data.color,verticalAlign:'middle',paddingRight:'5px'}">...原创 2022-02-17 19:24:33 · 652 阅读 · 0 评论 -
Vue3.0 + TS 防抖
防抖方法:const debounceEvent = ((func, wait = 2000) => { let timer; return function (...args) { if (timer) clearTimeout(timer); let callNow = !timer; timer = setTimeout(() => { timer = null; }, wait) if (callNow) func.app原创 2021-12-28 15:37:12 · 1237 阅读 · 0 评论 -
vue3.0 动态调用export进来的两种方法
1.在index文件中定义方法体const FORM = (instance,data)=>{ const urlAxios = instance.axios; const $this = instance.proxy; urlAxios.post({ url: "jd", data: { sid: instance.sessionId, cmd: '_COPY_PAGE_JSON',原创 2021-12-16 11:15:14 · 3637 阅读 · 0 评论 -
vue3 使用Bus总线
ts +vue31. main.ts 引入import mitt from "mitt"app.config.globalProperties.$bus = mitt();2.在传数据里import {Emitter} from 'mitt'const {ctx: $this}: any = getCurrentInstance();const bus = $this.$bus as Emitter;//排序const sortFun = (sortCase:原创 2021-06-09 18:35:18 · 3955 阅读 · 0 评论 -
Vue 动态生成表单item
1.首先 判断list(几个item)的长度,判断根据特定标识动态生成 form对象 (动态绑定的数据)2.绑定在组件上3.在子组件里进行监听 computed,并且emit出去大概过程如下:searchData.map((item: any) => { let modelData = item.field + item.id if (item.uicomponent == '复选组') { form[modelData] = []; } else if (i原创 2021-05-12 18:23:45 · 1142 阅读 · 0 评论 -
html加载vue组件
由于技术升级,之前 前后端不分离的项目,需要部分组件的形式实现,所以就有了html加载vue组件的需求,接下来 笔记???? ????两种方式 : 第一种方式: 用 js type的方式引入组件 script type="text/x-template" id="tempApp"> <awsuiapp :modelTypes="modelTypes" :buttonLists="buttonLists"></awsuiapp></script>原创 2021-04-27 18:39:57 · 1896 阅读 · 0 评论 -
快速删除 node_modules
npm install rimraf -grimraf node_modules原创 2021-03-01 18:07:44 · 79 阅读 · 0 评论 -
Element table组件单元格合并(横向,纵向,表头)
近期做项目有合并单元格的案例,所以简单的解释如下分为两部分一部分为头部的合并另一部分为表体的合并表头的合并首先要知道header-cell-style 这个合并头部的方法解释如下:b包括四个参数分别是 row column rowIndex columnIndexrow column 行 列 rowIndex 行下标 columnIndex列下标下标可以参考下面这张图~实现方法: disCountHeader({ row, column, rowInde...原创 2020-12-10 11:27:16 · 5128 阅读 · 0 评论 -
element 合并 单元格实例
本文章分为两部分: 一部分为表头合并,另一部分为table内部合并(行合并和列合并)原始案例:表头合并:实例:原创 2020-12-09 18:48:00 · 811 阅读 · 0 评论 -
elementUI解决el-checkbox自定义样式
默认样式(三种):自定义样式:实现代码:HTML:<div class="formCss" style="margin-top: 20px"> <el-form ref="form" :model="sizeForm" label-width="100px" size="mini"> <el-form-item label="选择日期:"> <el-date-picker v-model="sizeFo...原创 2020-11-19 17:37:31 · 11030 阅读 · 3 评论 -
Vue 中 Axios 的封装和 API 接口的管理
一、axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文档。安装npminstallaxios;//安装axios引入一般我会在项目的sr...转载 2020-10-22 11:10:36 · 98 阅读 · 0 评论 -
element 动态设置tabel的高度
1.绑定变量 height <el-table :data="tableData" :header-cell-style="headerStyle" align="center" :height="tableHeight" stripe border> </el-table>2.定义变量tableHeight: "100%",3.定义方法 getHeight() { this.tableHeig原创 2020-08-11 19:28:54 · 1867 阅读 · 0 评论 -
element 日期选择器时间不对应问题
选中时间显示错误(和系统时间相差8个小时)原因参考:https://www.jianshu.com/p/a0020e18912c转载 2020-08-05 15:03:01 · 2397 阅读 · 1 评论 -
element tree 获取到父ID 并回显
描述:el-tree 子菜单未选中的情况,也能获取父节点Id,回显时后台也将父节点的Id传回来,但是子节点全部选中,主要解决这两个问题。1、获取父id①getHalfCheckedKeys 使用这个方法用来获取父节点半选择状态ID值this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())2、回显时获取父节点,子节点不能全选<el-tree @check-change="...原创 2020-07-30 15:08:28 · 1002 阅读 · 0 评论 -
Vue-element 日期校验 结束时间大于开始时间
1、定义templete <el-form-item :label="$t('execution.StartingTime')" prop="startDateTime"> <el-date-picker v-model="startDateTime" type="datetime" placeholder="年/月/日 时:分:秒" value-form原创 2020-07-28 11:07:03 · 4854 阅读 · 1 评论 -
vue 变量名的字符串获取变量
需求:vue项目中存在变量option1和option2;通过option+'num'的形式进行读取变量的内容第一步:定义方法: changeOPtions(num){ let NumB = Number(num)+1; let option="option"+NumB; return option; }, //通过此方法拼接变量名称得到字符串第二步方法:let cc = this.changeOPtions(echartType);..原创 2020-07-17 17:18:16 · 3618 阅读 · 0 评论 -
vue select 单独组件实现
父组件:<systemName :systemNameList="systemNameList" :systemNameChecked="systemNameChecked" @choonseSystemName="changeSystemName"></systemName>:systemNameList="systemNameList" 初始化List用的:systemNameChecked="systemNameChecked" 选中回显用的@choo...原创 2020-06-05 14:27:02 · 558 阅读 · 0 评论 -
element 单选框 取消选中
<el-radio-group v-model="checked1" > <el-radio label="涉及疏整促工单" @click.native.prevent="radioChange1('涉及疏整促工单')"></el-radio></el-radio-group>radioChange1(txt){ this. checked1?this.checked1=false:this.checked1=txt;},...原创 2020-06-05 11:49:48 · 3094 阅读 · 0 评论 -
element el-cascader动态加载数据
需求:1.点击下拉框请求一级数据,选择一级请求数据获得二级数据,选择二级数据获得三级数据 2.任意一项都能够被选中实现效果:实现过程: <el-cascader v-model="partyOrganId" :show-all-levels="false" ref="sysCascader" :props="prop" @change="handleChange($event)" clearable>...原创 2020-06-05 11:45:01 · 11549 阅读 · 6 评论 -
vue 多选下拉框加搜索
首先引入必要的文件 <!--样式依赖--> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-select/1...原创 2020-04-21 09:02:01 · 2175 阅读 · 0 评论 -
vue 点击按钮复制input内容
方法:例子: 复制 numbers 的值到剪切板 <el-col :span="20" > <el-form-item label="服务器ID" label-width="120px"> {{numbers}} </el-form-item> </el-col> <...原创 2020-03-19 19:49:34 · 1813 阅读 · 1 评论 -
vue element el-select选中不了
问题: 描述: el-select选中不了 方法也触发不了,部分el-input也不可以 使用情景:table列表点击编辑,将数据回显在 Dialog对话框里,然后进行修改 但是发现选不了,部分input也不能进行编辑内容 解决:分成两步: 1.查看你绑定的v-model的属性有没有在data里面定义:查看data数据(是否将typeID定义) 来康康这...原创 2019-12-17 10:41:03 · 5252 阅读 · 0 评论 -
npm install时报错:Please check if you have git installed and in your PATH.
解决方法:缺少git的环境变量具体步骤如下:1.下载安装git2.找到git的bin文件夹将文件路径复制 添加到环境变量里面去具体步骤如下:控制面板:==>系统与安全==>系统=>高级系统设置==>环境变量==>path 编辑==>新建然后再将地址放进去就Ok啦在cmd里运行git config --global ht...原创 2019-10-31 19:40:49 · 3299 阅读 · 0 评论 -
Error: EPERM: operation not permitted, unlink
今天在github上download了一个项目 vue + Element的 但是放在vscode里就报错,大部分人说是权限问题,没有权限,但是我用管理员的身份运行 还是会报同样的错误,网上有各种解决办法·1.降低npm的版本(没试)2.用管理员的方式运行(没成)3.关闭项目的运行软件无论是webstorm还是vscode或者idea全部关闭,运行 npm install --no-optiona...原创 2019-10-23 11:12:27 · 2338 阅读 · 1 评论 -
vue button 按钮点击默认刷新按钮
解决将<button class="btn btn-sm" @click="searchStudent">搜索</button>这种button按钮 改为input type=“button”形式: <input type="button" class="btn btn-sm" @click="searchStudent"/>搜索就可以解决...原创 2019-09-29 16:08:56 · 2417 阅读 · 0 评论 -
vue 父组件给子组件传值
vue 父组件内容:<v-pagination ref="vPagination" :totalinfo="total" :current_page="current":sizeinfo="size" :pagesinfo="pages"></v-pagination>v-pagination 为子组件在父组件中定义的组件名称 data(){ ...原创 2019-04-21 16:31:31 · 294 阅读 · 0 评论 -
vue 子组件 created 方法不执行问题
近期做了一个项目 里面有一个树形菜单,将数据写在 js (死数据)中,所有的东西都能够正常执行(i 标签,子节点,父节点),但是当在请求接口文件或者请求后台数据的时候,发现引入的子组件的created方法不执行,但是点击父级菜单展开时还是能够触发,后来发现 是生命周期的问题,仔细查看一下,后来解决 解决方法如下:用watch 检测一下data的数据变化,created方法既然在点击的时候执行,所以...原创 2019-05-10 16:15:29 · 26589 阅读 · 9 评论 -
vue sessionStorage 用法
存储数据:sessionStorage.setItem("loginInfo",JSON.stringify(bdata));取数据var loginObj=JSON.parse(sessionStorage.getItem('loginInfo'));原创 2019-09-19 17:49:42 · 985 阅读 · 0 评论 -
vue select 选中问题
select一般用法: <select class="form-control" v-model="userinfo.roleId" @change="identitychecked($event)"> <option>--请选择--</option> <option v-for="li in roleLists" :value="...原创 2019-09-19 16:28:44 · 399 阅读 · 0 评论 -
vue post 请求不到数据 解决方法
安装 qs npm install --save axios vue-axios qs引入:<script>// 引入分页组件import vPagination from '../commonpage/Pagination.vue';var qs = require('qs');export default {。。。。。。}再进行axios...原创 2019-04-17 21:18:36 · 6261 阅读 · 0 评论 -
vue 请求后台数据方法
this.axios.post("url", data)this.axios.post(`http://...... `, data) .then((res) => { var result = res.data; alert(result ); })原创 2019-04-17 21:13:02 · 2300 阅读 · 0 评论 -
vue-router.esm.js:1697 RangeError: Maximum call stack size exceeded
可能错误原因:死循环 或者 查出最大限制今天我在做vue 分页的时候遇到了这个问题,经过检查发现,后台的分页size设置的是10条,在做按钮点击刷新界面事件时,已经有了10条数据然后又用了this.list.push() 事件 所以就报了此错误 ,后来查看了替换的方法 改完后为 this.list.replace() 应该会解决此错误...原创 2019-04-17 21:03:55 · 1255 阅读 · 0 评论 -
vue 报错: Avoid mutating a prop directly since the value will be overwritten whenever the paren
可能错误原因:将父组件传给子组件的数据 ,重新赋值了解决方法:例如:父组件传递的 current_page在 created()方法将值赋给另一个变量 再进行运用如图所示: 接下来 直接用 current_pageinfo 进行一切操作...原创 2019-04-17 20:56:31 · 676 阅读 · 0 评论 -
vue 去掉访问路径的 /#/
解决方法:添加 访问模式: mode: 'history',如图所示: 区别:hash模式下,仅hash符号之前的内容会被包含在请求中,如http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。history模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如ht...原创 2019-04-17 20:24:12 · 4491 阅读 · 0 评论 -
Vue $emit()不能触发父组件方法的原因
$emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名如果修改后还是不行的话,就改用: this.$parent.Event (Event为父组件中的自定义方法)...原创 2019-04-21 15:54:08 · 9639 阅读 · 5 评论 -
vue子组件调用父组件的方法
两种方式:第一种:this.$emit("自定义方法名", 参数); 参数:可有可无第二种:this.$parent.Event();原创 2019-04-21 15:48:52 · 221 阅读 · 0 评论 -
vue一般搭配什么 UI 框架
近期要做一个vue项目 我做为一前端小白,之前一直用 boorstrap ,但是查资料的时候发现很多人用ElementUI和vue搭配使用,接着我便查了ElementUI发现:ElementUI 自定义参数较少,颜色搭配也是绝绝的,但是蓝色主题还是挺友好的,如果使用的话需要自己搭配颜色,修改默认样式进行使用,还有一个大问题就是:网页加载慢慢的所以接下来打算试试 muse-ui 和·vu...原创 2019-04-12 10:30:19 · 13241 阅读 · 5 评论 -
Error:http://eslint.org/docs/rules/indent Expected indentation of 2 spaces but found 4
错误如下:错误原因: 不符合eslint的校验规则 Tab键不等同于同行缩进,,校验错误 或 注释有问题 ://这种注释会报错 应换为/* */ 这种的 但是成片代码这么多如何更换?????遇到这个问题试了各种办法都没有解决但是最后还是找到了解决之法:在.eslintrc.js 文件中 添加'no-unused-vars': 0大...原创 2019-03-31 21:04:59 · 5882 阅读 · 0 评论 -
vue 中v-for 提示错误的解决办法
错误如下:解决方法:想渲染一下item 和index 通过 :key=“item” 结果如下:index还是报错 有了如下解决:将 :key=“item” 改为:key="index",问题解决...原创 2019-03-23 19:08:19 · 9968 阅读 · 0 评论 -
Vue安装教程
推荐安装教程链接:https://www.cnblogs.com/laizhouzhou/p/8027908.html第二次启动显示 main.js 找不到解决方法: 在入口文件 Main.js 文件中的import App from './App' 改为import App from './App.vue' 启动正常...原创 2019-03-23 18:50:32 · 122 阅读 · 0 评论