笔记
F N Nancy
不要假装很努力,结果不会陪你演戏
展开
-
判断字符串是否为JSON格式
json校验原创 2023-03-01 16:44:51 · 118 阅读 · 0 评论 -
el-select 选项只能被选一次
el-select 选项只能被选一次原创 2022-12-05 10:30:02 · 1068 阅读 · 0 评论 -
input 回车生成tag标签
input 回车生成tag标签原创 2022-11-23 15:41:40 · 1599 阅读 · 0 评论 -
el-tree 添加且或条件并确定数据格式
使用el-tree添加条件原创 2022-11-23 15:25:22 · 870 阅读 · 0 评论 -
el-input-number踩坑(禁止输入)
el-input-number 禁止输入原创 2022-10-26 17:28:17 · 2405 阅读 · 2 评论 -
el-table表格展示并写入枚举值(formatter)
table表格展示并写入枚举值(formatter)原创 2022-10-18 15:49:52 · 2626 阅读 · 0 评论 -
echarts 简单用例 ( 问题:Initialize failed: invalid dom 报错)
正确使用echarts原创 2022-10-03 11:20:00 · 365 阅读 · 0 评论 -
结合elementUI实现excel导出
导出文件格式为excel格式,导出数据包括表头。原创 2022-07-20 11:03:39 · 715 阅读 · 0 评论 -
结合elementUI实现excel导入导出
前端直接实现导入,导入文件格式为excel,点击导入直接过滤文件格式为excel。原创 2022-07-20 10:40:10 · 3098 阅读 · 0 评论 -
数组对象修改key(属性)值
修改对象属性可以使用数组中map方法,生成一个新数组。例如:let arr = [{name: '小明',label: beijing, age: 20},{name: '小兰',label: nanjing, age: 18},]如果要修改 name 属性为 Gname,则let newArr = arr.map(item => {return {Gname: item.name,...原创 2022-05-02 11:28:04 · 517 阅读 · 0 评论 -
element-ui select 滚动翻页(远程)
关键字搜索关键字搜索结果翻页无关键字翻页关于滚动条翻页,可以写一个公用方法1 、新增一个js文件:directive.jsimport Vue from 'vue'export default () => { Vue.directive('scroll', { bind(el, binding) { // 获取滚动页面DOM const SCROLL_DOM = el.querySelector('.el-select-dropdown .e原创 2022-04-15 19:44:17 · 1759 阅读 · 4 评论 -
无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1
遇到一个比较奇葩的问题,新建项目安装了脚手架2.x版本之后,vue -V查看是否安装成功时,开始报错解决办法:1.管理员身份运行PowerShell2.执行:set-ExecutionPolicy RemoteSigned之后再去查看vue -V 就可以了参考链接...转载 2021-12-23 16:57:38 · 648 阅读 · 0 评论 -
正确理解并运用正则表达式
了解正则: 正则基础点: 标识符或修饰符(flags)修饰符 描述 g 全局匹配(global) i 忽略大小写(case-insensitive) m 多行匹配(multiline) 字符合集(Character Sets) 修饰符 描述 [xyz] 匹配 “x"或"y”"z" [^xyz] 补集,...原创 2021-11-23 17:28:26 · 631 阅读 · 1 评论 -
js 关于时间、比较、转换
新的需求多次用到时间的转换和比较,首先我想先说下时间的转换。关于时间的转换,可以直接在html里面用,这里我用了个moment 插件:首先应该下载并在main.js全局引用。运用moment 里的方法对日期进行格式化:moment().format('MMMM Do YYYY, h:mm:ss a') //// 十一月 18日 2021, 6:05:42 晚上定义一个时间过滤器,根据需要可以进行修改Vue.filter('dateFilter', (input, format...原创 2021-11-18 18:21:19 · 312 阅读 · 0 评论 -
数组中对象去重
let arrList = [ { id: 0, name: "小明" }, { id: 1, name: "小张" }, { id: 2, name: "小李" }, { id: 3, name: "小孙" }, { id: 4, name: "小z" }, { id: 2, name: "小x" }, { id: 3, name: "小a" }, ] let obj = {} let resultList = [] for (v.原创 2021-10-18 14:58:17 · 119 阅读 · 0 评论 -
Cannot read properties of null (reading ‘forEach‘)“
最近遇到了几次这个问题,索性就记录下。实在不知道这是什么错,可以百度翻译下,大致就明白了:获取的属性为 null ,所以就会报forEach(方法) 无法读取。这种就是获取的数据有问题 是 null 所以不能使用 forEach 方法。加个 if 条件就可以解决了...原创 2021-10-14 11:02:35 · 19608 阅读 · 0 评论 -
vue 重置数据(初始化)
在项目中我们会遇到初始化数据的问题,可以 this.xxx = ‘’,这种方式是常用的,但是如果是data里面的数据,这种方式就会使代码看起来有些冗余。那么,我们可以使用this.assign()方法或是Jsonthis.assign() // 此方法是将可枚举属性的值从一个或多个源对象复制到目标对象,它返回的是目标对象。它有两个参数,target:目标对象;source:源对象。 // 初始化所有data数据Object.assign(this.$data, this.$options.dat原创 2021-09-06 16:02:08 · 3598 阅读 · 0 评论 -
给 div 标签 ( List 数据 ) 设置禁用,不可点击
在项目中遇到了对于 List 数据的部分禁用问题首先我们在写 List 的时候会先定义或者是从后台获取数据,但是很少会用到只使用部分数据这里我们可以对标签定义一个类名(class),在style里面对类名进行定义.类名 { pointer-events: none // 禁用}对于数据较多的时候,我们可以直接使用标签来定义如:div:nth-child(2) { pointer-events: none // 禁用}这里 nth-child() 括号里面是第几个,但是也可能会作用到原创 2021-08-31 17:30:28 · 843 阅读 · 0 评论 -
页面刷新之后 store 数据丢失
首先登录系统 是有数据输出的,但是随着页面的刷新,数据变没了。直接上问题代码,vue文件参照上篇文章;setApplist() { let ipconfig = ip // 接收从 A 文件传输过来的数据 let appList = this.$store.state.appList let paltList = this.$store.state.platformList console.log(appList ,'appList ')原创 2021-06-23 16:23:01 · 349 阅读 · 2 评论 -
非父子组件使用 vuex 传参
首先要先安装 vuexnpm install vuex --save如果是修改成熟的项目,一般不需要此步骤。在store 文件夹下创建 index.js 文件import Vue from'vue'import Vuex from 'vuex'Vue.use(Vuex)// 创建仓库,用来存储共用的数据export default new Vuex.stroe({ state: { appList: [], platformList: [] }, mutation原创 2021-06-23 15:59:07 · 272 阅读 · 0 评论 -
给下拉框项增加自定义图标
最近应产品需求,需要在下拉框选项中给某一项数据增加提示(自定义)图标示例图片代码入下:<el-option label="链接类型" value='2'> <span>链接类型</span> <el-tooltip content='系统将自动将长链接地址转为短链接地址'> <i class="el-icon-question"></i> </el-tooltip></el-optio原创 2021-06-07 16:34:10 · 715 阅读 · 0 评论 -
vue 怎么修改 confirm 的文字样式和颜色
像是这种弹出框我们一般很少去做文字样式修改,但是也免不了要修改现在就是这样,有一个需求是要做下样式的修改通常我们都是这样写,但是当需要修改文本样式的时候,我们需要 createElement 新建元素和对象,然后对新建的元素进行标签化设置this.$confirm('内容提示',{ type:'warning'}) .then(()=>{ done()}).catch(()=>{})修改文本样式代码,如果需要 icon 图标,需要把注释代码打开,其中 colorYellow原创 2021-05-24 14:11:05 · 8229 阅读 · 4 评论 -
‘_‘ is defined but never used no-unused-vars
报这个错是因为项目安装了 Eslint 规范不确定的话,可以在package.json 文件 查看解决方案:在 package.json 文件里面 添加 如下代码:"rules": { "generator-star-spacing": "off", "no-tabs":"off", "no-unused-vars":"off", "no-console":"off", "no-irregular-whitespace":"off",原创 2021-05-10 11:22:17 · 436 阅读 · 0 评论 -
项目中 单行文本过长或多行文本时,用省略号代替并悬停时提示全部文本内容
项目中,经常会遇到单行文本过长或是多行文本显示的冗长,可以使用省略号 ‘…’ 代替一、单行文本时// overflow:hidden ; //溢出的部分隐藏 // white-space: nowrap ; //文本不换行// text-overflow:ellipsis ; //ellipsis:文本溢出显示省略号(...);clip:不显示省略标记(...),而是简单的裁切style=" overflow:hidden; white-space: nowrap ; text-overflow:原创 2021-04-21 16:46:49 · 1244 阅读 · 6 评论 -
vue 前端使用 element-ui 实现省市级联动
最近用 vue 结合 element-ui 写了个省市级联动,由于是纯前端,故而用了 “ 死数据 ”代码如下:<template> <div> <el-form label-width="20px"> <el-row :gutter="20"> <el-col :span="8"> <el-form-item label='省'>.原创 2021-04-27 17:05:48 · 446 阅读 · 0 评论 -
vue 后台返回的数据怎么换行 ?
vue 使用el-ui组件获取后台数据的时候,获取的数据较长,需要实现换行,添加 white-space: pre-line 就可实现换行,亦或是使用class样式代码如下:<el-form-item label="话术预览" prop class="radio-content"> <p style="margin:0px;width:100%;word-break:break-all">摘要内容:{{ messageTitle }}</p> <p st原创 2021-02-02 17:39:07 · 2674 阅读 · 0 评论 -
vue使用element-ui 怎么处理v-for和v-if 不能同时使用(tag标签closable)
tag标签中有一个closable属性,但是要在某一条件下删除标签,首先想到的是使用v-if条件判断,但是在此标签中,已使用了v-for,,那么就不能再使用v-if,但是又要实现需求,可以把closable写成变量,并附有条件//原代码<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)"> {{tag}}原创 2021-01-28 20:18:31 · 2126 阅读 · 0 评论 -
vue 父子组件传值(父传子)
在项目中经常会用到传值的情况,今天说下父传子的传值方法:父组件使用 v-model 绑定,并在标签里传值,引入子组件<el-radio-group v-model="radio" @change=changeMax> <el-radio v-model="addCagLabel" v-for="item in radioPay" :key="item.value" :label="item.label" :value="item.value"></el-radio原创 2021-01-28 20:00:52 · 544 阅读 · 0 评论 -
vue 使用element 单选框 怎么同时获取value和label值
单选框要获取value和label,并且会在不同组件接口使用,就不能把数据写死,而是要做一个循环,获取到后就可以传给其他组件使用了;如下:样式图://HTML <b>用户体系类型:</b> <el-radio-group v-model="radio" @change=changeMax> <el-radio v-model="addCagLabel" v-for="item in radioPay" :key="it原创 2021-01-28 19:37:03 · 5058 阅读 · 0 评论 -
vue 使用 element-ui 实现小问号提示
//代码展示: <template slot-scope="{row}" >{{ row.status==0 ? '待计算':row.status==1 ? '已暂停':row.status==2 ? '计算中':row.status==3 ? '待确认':row.status==4 ? '营销中':row.status== 5 ? '已结束':row.status==6 ? '等待中':row.status==7 ? '任务失败 ':原创 2021-01-26 18:37:22 · 7725 阅读 · 2 评论 -
cmd命令和终端怎么实现切换目录
1.从左下角搜索进入是 c 盘(从哪个盘进去会显示那个盘),2.如果想要访问d 盘,只需要输入d:3.如果要进入具体的文件夹,输入 cd 《文件名》4.如果想看文件的目录结构,输入 dir 回车5.返回上一层目录,输入 cd…...原创 2021-01-24 14:15:35 · 6824 阅读 · 0 评论 -
webpack配置
webpack配置添加链接描述转载 2020-11-10 00:03:07 · 95 阅读 · 0 评论 -
Vue3.0之proxy代替object.definProperty()及object.definProperty()的缺陷
Vue3.0之proxy代替object.definProperty()及object.definProperty()的缺陷添加链接描述转载 2020-11-09 23:52:19 · 314 阅读 · 0 评论 -
vue中scoped实现原理及穿透方法
scoped实现原理在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码:<style scoped>.example { color:原创 2020-11-09 22:22:03 · 298 阅读 · 0 评论 -
'serve' 不是内部或外部命令,也不是可运行的程序 或批处理文件
‘serve’ 不是内部或外部命令,也不是可运行的程序或批处理文件安装serve 使用命令:npm install -g serve 使用serve -s build 是生产服务器地址原创 2020-03-30 21:34:00 · 1415 阅读 · 1 评论