vue
vue开发时遇到的坑
一只快乐的小咩咩
路漫漫其修远兮,吾将上下而求索
展开
-
js将数组里的的元素多种类型(字符串/数组/布尔)相互转换
js将数组里的的元素多种类型(字符串/数组/布尔)相互转换原创 2023-02-16 11:06:42 · 702 阅读 · 0 评论 -
vue两个按钮切换分别使左右两边内容占满全屏(elementui)
vue两个按钮切换分别使左右两边内容占满全屏(elementui)原创 2022-09-26 17:16:12 · 3325 阅读 · 2 评论 -
简述vue表格数据赋值给新变量后,原表格数据也随新变量数据的变化而发生改变
vue表格数据赋值给新变量后,原表格数据也随新变量数据的变化而变化原创 2022-09-01 11:25:35 · 682 阅读 · 0 评论 -
Vue/Js 将两个数组合并生成一个对象数组 并为其添加相应的key值
有两个数组(示例):let arr1 = ['张三','李四','王五']let arr2 = ['18', '19', '20']你想实现的效果arr3 = [ { name: '张三', age: '18' }, { name: '李四', age: '19' }, { name: '王五', age: '20' }]实现函数如下arr1.forEach((item, i) => { arr3.push({ name: item, a.原创 2022-05-10 10:35:15 · 2177 阅读 · 0 评论 -
vue elementui表单验证组件动态修改required状态
最近遇到的需求:在一个表单里,有一个单选项检查结果:(无问题 有问题 不适用)(必填)和一个输入框问题描述:input(选填),当但选项值为(有问题)时输入框为必填项,否则为选填项。如果像以前表单验证正常写法就会报错如下:正常显示代码如下下面展示一些 内联代码片。<el-form-item label="问题描述" prop="desrc" :rules="{required:menuForm.result == '1'? true:false,message:'请输入问题描述'}">原创 2021-11-17 15:02:17 · 6925 阅读 · 0 评论 -
vue前端实现下载本地文件(不调用后台接口下载文件模板)
今天给的需求是希望前端本地直接下载模板 不调用后端接口以下提供两个简单的方法方法一:使用elementui下面展示一些 内联代码片。<el-button type="text" icon="el-icon-download" @click="handleDownload">模版下载</el-button>//下载模版 handleDownload(){ window.location.href = '../../../static/模板.xlsx' } //原创 2021-11-12 16:36:50 · 4294 阅读 · 0 评论 -
vue v-for循环出来的数组加不同的颜色(颜色循环)
上面方块是由后端返回的数组 需求是每四个方块循环不同的背景颜色下面展示一些 内联代码片。// 具体v-for的代码块<div v-for="(item, index) in appList" :key="index"> <span :style="{'background':item.color}"></span> // 方块 样式就不写了 <span>{{系统名称}}</span></div>// appLi.原创 2021-10-13 16:41:07 · 7350 阅读 · 4 评论 -
vue根据屏幕大小设置css样式(实时监控屏幕大小)
pc端当屏幕缩小时总会有些css样式不适配一下基本可以实时监测屏幕大小下面展示一些 内联代码片。// 需要动态修改的css<div :class="isWidth ? 'title' : 'title2'"><111111/div>// 定义一个变量return { data(){ screenWidth:document.body.clientWidth, // 屏幕宽度 isWidth: false // 动态修改css控制变量 }}// 定义一个原创 2021-09-02 19:06:48 · 2855 阅读 · 1 评论 -
关于css中的/deep/的用法(修改elementui库的css但是不影响全局)
在项目中我们经常会用到Less或者Sass 。其中Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范。以elementui库为例如果我们想修改某一个输入框的长度 但是不想影响全局 这时候就体现了/deep/的重要性下面展示一些 内联代码片。// 修改输入框长度案例.newDalio { /deep/ .el-form-item { width: 200px !important; .el-form-item__content { width: c原创 2021-08-12 11:12:09 · 1254 阅读 · 0 评论 -
element ui中select 下拉框在火狐浏览器最后一行显示不完全(谷歌正常)
在项目开发的时候用到了el-scrollbar组件 并且设置了隐藏横向滚动条下面展示一些 内联代码片。// 隐藏横向滚动条.el-scrollbar__wrap { overflow-x: hidden;}// 竖向.el-scrollbar__bar.is-horizontal { height: 0 !important;}因为有以上设置 所以导致在火狐浏览器的时候最后select 下拉框最后一行总是显示不完全 所以解决方法如下下面展示一些 内联代码片。.el-select-d原创 2021-07-21 17:09:46 · 1294 阅读 · 0 评论 -
elementui 表格单选以及如何将element Radio组件label绑定的值不显示
如果你想要实现如下的效果图就看看 或许对你有帮助详情请看如下代码下面展示一些 内联代码片。// 表格部分代码 <el-table :data="operList" fit show-header style="width: 100%"> <el-table-column label="选择" width="50"> <template scope="scope"> <el-radio :labe原创 2021-07-07 17:06:53 · 1565 阅读 · 0 评论 -
过滤两个数组并取出不同/相同项(vue/filter)
话不多说 直接上干货内联代码片。// 数组Alet arrA = ['1111','2222','333','4444','5555']// 数组Blet arrB= ['aaa','bbb','4444','5555','dddd','eeee','ffff','yyyy','mmmm']过滤B数组中不包含A数组的项let differentArr = arrB.filter(item => arrA.indexOf(item.id) > -1)// differentArr =原创 2021-06-30 16:27:24 · 9270 阅读 · 3 评论 -
vue空格集合
在开发的时候很多时候需要很多间隔 这时候就要用到空格 但是单纯的输入空格不能实现业务需求 下面总结一下vue中使用空格的例子 == 普通的英文半角空格 == == == no-break space (普通的英文半角空格但不换行) == 中文全角空格 (一个中文宽度) == == en空格 (半个中文宽度) == == em空格 (一个中文宽度) == 四分之一em空格 (四分之一中文宽度)相比平时的空格( ),nbsp拥有不间断(n原创 2021-06-10 16:52:31 · 3798 阅读 · 0 评论 -
js/elementui 树形结构数据转化(后台平铺返回)
js/elementui 树形结构数据转化(后台平铺返回)// 后端返回格式var data = [ {"id":2,"name":"aaa","pid":null}, {"id":3,"name":"bbb","pid":2}, {"id":5,"name":"ccc","pid":2}, {"id":100,"name":"ddd","pid":2}, {"id":6,"name":"eee","pid":2}, {"id":601,"name":"fff","pid":6}, {"i原创 2021-05-19 10:52:04 · 949 阅读 · 1 评论 -
vue 下载模板excle 报错 无法打开
vue 下载模板excle 报错 无法打开最近有个需求是要下载模板以供后来导入提供样式效果如图点击下载后左下角会出现所下载的文件但是后来确报错无法下载具体解决代码如下:下面展示一些 内联代码片。// 划重点 封装接口方法时加上responseTape expoet function down (data) { return request ({ url: xxx, method: xxx, data, responseTape: 'blob' // 必须要加上否则会报错原创 2021-05-12 15:41:27 · 1709 阅读 · 4 评论 -
vue+element ui 中国标准化时间转换日期多种格式
vue+element ui 中国标准化时间转换日期多种格式最近在做项目的时候用到了DatePicker 日期选择器 结果选好日期获取日期value得到这个玩意儿 有点恶心的中国标准化时间如果想要转化成2021-04-3或/2021/04/30一系列你想要的结果 我是这么写的 你可以作为参考自己改下面展示一些 内联代码片。// A code blockvar foo = 'bar';// An highlighted blockvar foo = 'bar';...原创 2021-04-30 14:48:32 · 2344 阅读 · 0 评论 -
vue过滤器filters使用方式之一(在双花括号中使用)
vue过滤器filters使用方式之一(在双花括号中使用)过滤器的意思大概就是,经过过滤器过滤之后出来另一样你想要东西,过滤器就是一个过滤的工具。例如,从[‘abc’,‘abd’,‘ade’]数组中取得包含‘ab’的值,那么可通过过滤器筛选出来‘abc’和‘abd’;或者下面例子把时间戳改为自己设置的具体格式的时间。过滤器可在new Vue实例前注册全局的,也可以在组件上写局部,以下例子用在局部。下面展示一些 内联代码片。 <el-table-column label="Author" wid原创 2021-04-23 14:53:12 · 899 阅读 · 0 评论 -
vue启动时报错* core-js/modules/es. .......
vue启动时报错* core-js/modules/es. …报错代码片段:一开始根据提示安装npm install --save core-js 然而并没有用 后来经过尝试发现版本太低 所以选择了高一点的版本下面展示一些下我的解决方法内联代码片。npm install core-js@3.8.1成功解决 如果不行可以再选择更高一点的版本。...原创 2021-04-09 15:58:30 · 7265 阅读 · 1 评论