- 博客(75)
- 收藏
- 关注
RSS订阅原创 Pinia使用state、getters、actions
1.3 根目录新建store/index.js中写入。2.1 Pinia定义state数据。1.2 main.js引入。
2023-06-19 18:30:21
560
原创 select 数据量过大时处理
<el-select v-model="getListParams.usedStatus" placeholder="请选择状态" filterable :filter-method="filterList" clearable @clear="clearList"> <el-option v-for="item in allListTop15" :key="item.baselineId" :label="item.baselineN
2022-05-13 22:05:58
1019
原创 工作中遇到的问题
传递额外参数@changepages=“getListData”@changepages=“val => getListData(val, item)”
2022-05-12 17:00:41
151
原创 sync用法
子组件 不能直接修改 父组件传过来的数据// 父传子<children :sex="sex" :hobby="hobby"></children>// sync父传子： <children :sex.sync="sex" :hobby.sync="hobby"></children> // 相当于<children :sex="sex" @update:sex="val => sex = val" :hobby="hob.
2022-05-10 21:52:02
394
原创 循环中通过ref获取某一个元素
<div @click="getmavonIndex(index)"> <mavonEditor :ref="'md' + index" @imgAdd="imgAdd" v-model="item.configContent" placeholder="请输入" :subfield="true" :editable="true" defaultOpen="preview" :toolbarsFlag="true" :height="400" ></mav
2022-04-17 09:52:06
487
原创 Vue递归组件
子组件<template> <div> <ul> <li v-for="(item, index) in list" :key="index"> <p>{{ item.name }}</p> <div v-if="item.cList"> <tree-menus :list="item.cList"></tree-menus>
2022-04-16 20:11:44
183
原创 slice 截取前10位
watch: { 'params.baselineRequire': { handler(val) { if (val.length >= 11) { this.params.baselineRequire = val.slice(0, 10) } }, deep: true, immediate: true }}
2022-04-16 01:22:14
1065
原创 数组的处理
let arr = [ { name: 'Dashboard', type: 'single', children: [ { name: 'Dashboard', permissionKey: 'a', } ] } ]let brr = ['aaa', 'bbb'] arr.forEach(item => { item.children = it
2022-04-12 14:24:26
182
原创 如何给对象赋值
$event 就是 v-model 的值key 和 value 一致时 只需写一个vuex 数据保存在内存中 刷新时 会丢失const store = new Vuex.Store({ state: { obj: {} }, mutations: { setObj(state, params) { state.obj[params.key] = params.value } } this.$store.commit('setObj', { key, valu.
2022-04-04 13:47:29
265
原创 Vue 循环中使用 await
async a(){ await this.b()}b() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('成功') }, 1000) })}forEach 外面写 async forEach 中使用 await 匹配不到async getTitleInfo() { for (let item of this.dataTitleIdsList) {
2021-11-06 22:59:46
1654
原创 使用 mixin 提取组件公共逻辑
mixin.jsexport default { data() { return { message: '国庆假期去哪里玩!' } }, mounted() { console.log('初始化执行') }, methods: { click() { console.log('点击') } }}import mixin from ‘./mixin.js’import mixin2 from ‘./mixin2
2021-10-09 09:41:21
202
原创 JS 数组赋值时 原数组、新数组 值同时改变
let a = [10, 20, 30]let bb = JSON.parse(JSON.stringify(a))a[0] = 100console.log(a) // [100, 20, 30]console.log(b) // [10, 20, 30]
2021-09-17 16:09:42
556
原创 JS 将多层嵌套的数组转为一层数组
let brr = { dataLablesId: "147", dataLablesName: "888", dataLablesParentId: "0", dataLablesPath: "147.", dataLablesVos: [{ dataLablesId: "148", dataLablesName: "8-2", dataLablesParentId: "147", dataLablesPath: "147.148.", dataLablesVos: [{
2021-08-03 14:33:26
1732
原创 JS数组对象取出指定元素相同的对象组成新数组
要处理的数组arr = [ {guid: "BMID0152", name: "北京研发中心", percentage: "1"}, {guid: "BMID0154", name: "北京一部研发中心", percentage: "2"}, {guid: "BMID0155", name: "北京二部研发中心", percentage: "3"}, {guid: "BMID0152", name: "北京研发中心", percentage: "1"}, {guid: "BMID015
2021-08-03 13:38:24
1959
1
原创 防抖节流原理
<div id="content" style="height:15000px; line-height:15000px; text-align:center; color: #fff; background-color:#ccc; font-size:80px;">相同点： 防止函数多次调用不同点：防抖： 一直触发函数 且每次触发的间隔小于 wait 则不会执行节流： 每隔一段时间执行一次var num = 1va
2021-04-15 19:50:20
170
原创 nextTick 使用场景
元素通过 v-if 控制显示隐藏当修改完显示状态后立马通过 ref 去操作 此元素这个时候会报错原因是 此元素此时还未渲染完成此时 需要使用 nextTick它会在 dom 更新完成之后 再去调用
2021-03-31 11:33:44
625
原创 Vue生命周期
new Vue() 初始化事件和生命周期beforeCreate 此时 data 和 $el(DOM元素)为undefinedcreated 此时 $el 为undefinedbeforeMounted $el 为 undefined 是虚拟dommounted 可操作真实的dombeforeUpdateupdatedbeforeDestory 清理定时器destoryed 实例不可用keep-alive 生命周期被 .
2021-03-30 16:30:53
101
原创 keep-alive 用法
需求首页 列表页 详情页首页进入列表页 列表页进入详情页详情页返回列表页 滚动条在相应位置列表页返回首页 首页进入列表页 在最上面第一步 在app中设置需要缓存的div//缓存的页面<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive>//不缓存的页面<router-view v-if="!$route.meta..
2021-03-29 17:04:46
277
原创 JS优雅小技巧
1. 通过条件判断给变量赋值布尔值// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2. 在if中判断数组长度为零// badif (arr.length === 0) {}// goodif (!arr.length) {}3. 在if中判断数组长度不为零// badif (arr.length !== 0) {}// goodif (arr.length)
2021-02-18 10:23:55
178
原创 扩展运算符合并对象、数组
let one = { a: '111' } let two = { b: '222' } let three = { c: '333' } let four = { d: '444' } let result = { ...one, ...two, ...three, ...four } console.log( result ) // { a: "111", b: "222", c: "333", d: "444"..
2021-01-26 16:50:11
494
原创 暴露数据
分别暴露export let school = '武汉大学'export let name = '彭于晏'统一暴露let school = '武汉大学'let name = '彭于晏'export { school, name }引入import { school, name } from './index.js'
2021-01-26 16:13:42
108
原创 Vue 恢复数据为初始状态
// 修改密码参数changePassParams: { oldpassword: '', newpassword: '', newpasswords: ''}Object.assign(this.$data.changePassParams, this.$options.data().changePassParams)this.data：获取当前状态下的data,也就是要改变的data数据;this.data：获取当前状态下的 data,也就是要改变的 data 数据; this
2021-01-18 14:57:33
716
原创 promise用法
新增员工时 先判断手机号是否注册 如果已注册 就不能新增 如果没注册 可以新增 // 校验手机号是否已注册 checkOilStaffMobilePhone() { return new Promise((resolve, reject) => { checkOilStaffMobilePhone({ mobilePhone: this.ruleForm.mobilePhone }).then(res => { .
2021-01-08 17:43:48
179
原创 if else优化
if (this.type === 0) { this.startDate = 0 this.endDate = 0 } else if (this.type === 1) { this.startDate = 1 this.endDate = 1 } else if (this.type === 2) { this.startDate = 2 this.endDate = 2 } else if (this.type === 3) { this.startDate =..
2020-12-31 10:47:24
233
原创 关闭浏览器 如何清除localStorage数据
浏览器关闭时 sessionStorage 数据将清空localStorage 数据 只要不通过代码特意的删除或手动删除 是一直存在的如何实现登录成功 用户信息保存在 localStorage 当中此时可以向 sessionStorage 中 保存一个唯一标识 isLogin入口文件判断 sessionStorage 中 是否有 isLogin 值如果没值 就表示浏览器关闭过 所以 sessionStorage 里的数据清空 那么此时清空 localStorage 里的数据...
2020-12-17 15:09:10
8774
4
原创 数组push时 覆盖的问题
数组push时，第二次的数据会覆盖第一次的数据let currentData = { oneMonth: this.oneMonth, twoMonth: this.twoMonth, threeMonth: this.threeMonth, fourMonth: this.fourMonth, fiveMonth: this.fiveMonth, sixMonth: this.sixMonth, sevenMonth: this.sevenMonth, .
2020-12-17 14:43:01
2567
原创 日常工作规范
boolean值用isXXX、hasXXX、canXXX命名一眼就能明白变量的意思是老师teacherList.forEach( teacher => {})赋默认值function getTeacherInfo(teacherName = ‘Teacher.Cang’) {}减少参数个数createClick({name: ‘彭于晏’,sex: ‘男’,age: 18})function createClick({ sex }){}...
2020-12-09 17:59:13
170
原创 ES6用法
var arr = ['林青霞', '李连杰', '成龙']var [ a, b, c ] = arrconsole.log(a) // 林青霞console.log(b) // 李连杰console.log(c) // 成龙var brr = { name: '彭于晏', age: 20, sex: '男', func: function(){ console.log('拼命三郎') }}var { name, age, sex, func } = brrconsole.l
2020-11-13 09:34:42
137
原创 var、let、const区别
var可以重复声明没有块级作用域有变量提升let不能重复声明有块级作用域无变量提升const要有初始值常量的值不能修改有块级作用域对于数组、对象的元素修改 不算做对常量的修改 不会报错...
2020-11-13 09:30:36
89
原创 使用 Element 时间选择器 数据回显后 再次修改 页面不更新
*** 问题首次改变 时间选择器 没问题 但是 编辑 时间选择器 页面没更新this.dialogParams.validDate = [res.validBeginDate, res.validEndDate]*** 原因因为 dialogParams 里的 valiDate 是个数组 直接赋值 视图是不会发生变化的*** 解决用$set()强制赋值this.$set( this.dialogParams, 'validDate', [res.validBeginDate, r.
2020-09-11 16:07:12
1153
原创 Vue+Element中的 el-form-item 进行表单验证时 使用 v-if 出现的问题
问题描述使用 Vue + Element 中的 el-form-item 时 用 v-if 处理显示或隐藏 校验规则失效原因v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值解决在 el-form-item 中添加一个属性 key key值只需要是独一无二即可...
2020-09-11 10:16:31
4896
5
原创 在vue中 循环 尽量别用 index 作为 key 值
当 :key=“index” 时其中一个元素发生了变化就可能导致所有的 key 值发生变化diff 算法 是比较同级之间的不同以 key 来进行关联假如删除第一条数据以后所有的 index 都会发生改变那么 key 自然也会跟着改变所以 index 作为 key 值是不稳定的这种不稳定性有可能导致性能的浪费所以能不用 index 作为 key 就别用...
2020-04-13 10:06:42
1097
原创 try catch
let arr = [ [1, 2, 3, 4, 5], [99, 66, 3, 1, 999]]try { arr.forEach(item => { item.forEeach(itemChild => { if (itemChild === 3) { foreach.break = new Error // 终止整个循环 } console...
2020-04-02 17:57:38
640
1
原创 左侧宽度固定、右侧宽度自适应
<div class="left"> left</div><div class="right"> right</div>.left { float: left; width: 50px;}.right { overflow: hidden;}
2020-03-17 14:24:11
152
原创 Vue中v-for为什么要加key
例：我们希望可以在B和C之间加一个FDiff算法默认执行起来是这样的即把C更新成F，D更新成C，E更新成D，最后再插入E所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。...
2020-03-12 10:02:41
371
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人