❤️❤️--vue2
包含vue2项目中大部分遇到的难点及常用难点、
suoh's Blog
My life is a straight line,turning just for you.
展开
-
vue中组件的props属性(详)
今天这篇文章,让你彻底学会props属性……props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。原创 2021-10-28 11:20:54 · 171134 阅读 · 51 评论 -
wangEditor中粗体和斜体设置无效果
原因可能是你项目里的全局样式导致的:可以单独对编辑器的 b 标签 和 i 标签进行样式设置.w-e-text { p{ b{ font-weight: bold !important; } i{ font-style:italic !important; } }}...原创 2022-05-07 11:29:42 · 3038 阅读 · 6 评论 -
js将树形结构数据转为一维数组数据
// 树形数据转为一维数组 getOneArr(arr) { let data = JSON.parse(JSON.stringify(arr)) let newData = [] const callback = (item) => { (item.children || (item.children = [])).map(v => { ...原创 2022-04-20 11:30:28 · 2432 阅读 · 0 评论 -
npm install时node-sass报错解决方案
1、先删除node_modules2、npm i node-sass -D 再重新安装一下node-sass3、cnpm install 再install4、npm run dev 再次运行就好了原创 2022-01-12 11:18:52 · 2575 阅读 · 1 评论 -
vscode格式化代码设置标签不换行
点击文件---首选项---设置点击setting.json文件,添加如下代码。 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "vscode-typ=script", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attribu..原创 2021-09-16 15:58:16 · 508 阅读 · 0 评论 -
elemenUI弹框二次封装
效果图:1、弹框组件<template> <!-- 封装弹框 --> <div class="popup"> <el-dialog :title="dialogTitle" :visible.sync="isShowDialog" :width="popupWidth" :before-close="handleClose" :modal="modal" >..原创 2021-07-27 11:26:35 · 584 阅读 · 0 评论 -
elementUI中设置可以换行的MessageBox弹框
效果如下: 第一步,封装MessageBox函数 在http.js(你封装函数的js文件里面)引入MessageBoximport { MessageBox } from 'element-ui';// 多行查看box框export function messageBoxMutiple(content,title,func){ MessageBox.confirm(content, title, { type: 'error', showConfirmBu..原创 2021-07-22 14:37:43 · 1515 阅读 · 0 评论 -
在vue中将base64图片转为File文件类型
https://blog.csdn.net/qq_41241767/article/details/109333430转载 2021-06-15 16:29:49 · 1432 阅读 · 2 评论 -
elementUI表格数据不实时更新(解决)--妙用方法
由于我对elementUI的表格进行了嵌套接口的调用,并且每个接口调用数据会有一定的时间,导致表格数据渲染不完全,但是打印表格的数据时候也都获取到了,只是页面数据只更新了一部分。一步搞定,表格数据刷新splice(1,0) 可以主动触发表格刷新哦~~~~~~~学废了吗>>>>>>>>>self.tableData = self.table;self.tableData.splice(1,0)...原创 2021-05-22 14:50:46 · 3007 阅读 · 1 评论 -
layui树形组件获取复选框选中的id
安排一波~目的:获取我所选中的所有id第一步:先在树形组件渲染函数里面添加两个属性 showCheckbox: self.isShowType, id: "demoId",第二步:在data里面定义一个存放id的数组第三步:在你需要获取到复选框选择的id函数里面去拿这些值注意:var treecheckdata = tree.getChecked("demoId");这个只能获取到父节点id,因此需要对返回值进行处理,才能得到选中的所...原创 2021-05-11 15:28:09 · 2161 阅读 · 3 评论 -
实现elementUI表格的动态表头与数据展示
实现elementUI表格的动态表头与数据展示:<el-table style="width: 100%" border :data="tableData"> <template v-for="(item,index) in tableHead"> <el-table-column :prop="item" :label="item" :key="index"></el-table-column> </template>&l原创 2021-04-28 18:51:29 · 2332 阅读 · 4 评论 -
使用element-resize-detector监听v-if的元素会失效(解决方案)
暂时没有很好的解决方法,既然在v-if中使用后组件销毁导致element-resize-detector监听失效,出现宽高不受控制的情况,,,目前没找到更合适的方法,那最简单的方法就是将v-if改成v-show。这就充分利用了v-show的优势(dom元素不销毁):v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还在...原创 2021-04-27 17:15:05 · 1742 阅读 · 0 评论 -
elementUI中给树形列表更换节点图标
修改样式,自己选择要更换的小图标:// 树形列表.el-tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg);}//有子节点 且未展开.el-tree .el-icon-caret-right:before { background: url("/static/img/addblue.png") no-repeat 0 3px; co原创 2021-03-31 13:46:50 · 2721 阅读 · 2 评论 -
vue中echarts图使用v-show隐藏出现图不撑满的情况
出现这个情况真是令人费解,呀呀呀呀呀!好好一个雷达图用 v-if 时会出现没有获取到dom结构而报错,所以要用v-show,但使用v-show 他是本身是结构就已经存在,当数据发生变化时,结构并没有重新渲染,所以会出现 echarts 图获取不到最外层大盒子的宽度而显示100px的情况,如下图明明设置了宽高,还不撑满!!!!解决方法:将v-show改成v-if 利用vue中自带的Vue.nextTick(function () { }) 主动触发一下图表,使之强制渲染就可...原创 2021-03-25 14:41:31 · 2320 阅读 · 3 评论 -
vue中实现动态表格嵌套--行数列数均不确定
很简单! 很简单! 很简单! 别慌,上代码~原创 2021-03-24 11:39:19 · 1204 阅读 · 0 评论 -
vue解决跨域--反向代理多服务或单个服务地址
一、解决单个接口地址跨域法一:1、在main.js中加入以下代码:import axios from 'axios'Vue.prototype.$axios = axiosaxios.defaults.baseURL = '/lhxt' //关键代码,默认加入公共url2、在config文件下的index.js文件中假如你想要反向代理的服务地址的前缀,名称要与上面给axios加入的公共url名称一致3、这个是封装的post请求,调用接口的时候直接传入除了服务地址前缀的后面地址原创 2020-11-13 17:16:53 · 1786 阅读 · 0 评论 -
vue渲染问题采坑记录:“Error in render: “TypeError: Cannot read property ‘time‘ of undefined“”
今天写项目在做搜索功能的时候,点击搜索按钮一直报这个错,,,一直没找到原因现在终于知道了,值得纪念一下,,,这是vue渲染错误问题,尤其是针对访问三层表达式的时候,如果页面加载的时候获取不到数据,而且在data里面也没有定义的话就会报这个错我赶紧一看我的代码,确实,使用了三层表达式然后在data里面我是这样定义的。。。直接定义一个空,因此页面便访问不到第三层的数据就会报错找到原因之后,我就在data里面重新定义了一下就完成了,当然,以上是最直接的方法,也可以通过...原创 2020-11-10 17:58:39 · 2050 阅读 · 5 评论 -
vue中简单的模糊查询--过滤数组对象
<div id="box"> <input type="text" v-model="keyword1"/> <ul> <li v-for="value in fSearch"> <img :src="value.img" alt=""> <p>{{value.name}}</p> </li> </ul>..原创 2020-08-14 18:04:21 · 2702 阅读 · 0 评论 -
elementUI表格实现可编辑和增加行功能--直接复制即可
结构: <div class="twoTable fuceng"> <div class="h_top"> <span>新建任务</span> <img src="../../../../static/img/close.png" alt="" @click="close_twoTableDelete"> </div> <div cla原创 2020-07-16 17:24:37 · 10688 阅读 · 2 评论 -
给elementUI的table表头添加按钮或者多选框
<el-table-column prop="date" :render-header="renderHeader"></el-table-column>methods:{ renderHeader(h) { return ( <div> <el-checkbox v-model="checked"></el-checkbox> .原创 2020-05-28 10:09:41 · 4435 阅读 · 0 评论 -
echarts自适应PC端屏幕分辨率并且刷新echarts图不空白
<div id="chartmainbar3"></div>mounted(){ this.resizeEcharts = () => { this.$echarts.init(document.getElementById("chartmainbar")).resize(); this.$echarts.ini...原创 2020-04-13 09:27:42 · 1569 阅读 · 0 评论 -
vue中使用websocket,一看就会,直接复制粘贴就可以使用
https://www.cnblogs.com/qisi007/p/10213886.html转载 2020-03-23 11:24:18 · 559 阅读 · 0 评论 -
解决vue中使用v-if隐藏echarts图之后无法再次触发显示的问题
解决vue中使用v-if隐藏echarts图标之后无法触发显示的问题使用v-show即可:<div v-show="isShowStru==1" id="structure" style="width:100%;height:350px;margin-top:50px"></div>使用v-show即可实现已经隐藏的echarts图表,当按钮对此进行触发显示时,即可...原创 2020-03-22 17:32:42 · 3744 阅读 · 0 评论 -
vue中将UTC时间转换为标准格式时间--十分好用
这里在vue中手动写日期格式化将UTC时间格式转换为“yyyy-MM-dd hh:mm:ss”写自定义目录标题强烈推荐,十分好用:https://blog.csdn.net/tg928600774/article/details/80348534...转载 2020-03-18 17:21:41 · 5463 阅读 · 0 评论 -
前端vue项目开发全家桶之vuex
Vuex 是一个专为 Vue.js 设计的状态管理模式vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件共享状态时,会需要:多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。这需要你去学习下,vue编码中多个组件之间的通讯的做法。来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态...原创 2019-07-25 10:19:28 · 422 阅读 · 0 评论