weixin_46482956的博客

原创 JS深拷贝(deepClone)比较实用的两种方法

分享下js深拷贝对象，两种最常用、最实用的方法方法1、递归遍历对象的属性，返回一个新的对象// 这里有两种写法，都可用const obj1 = { name: 'wang', f: function() {}, tar: { name:'Jason', age: 18 }}function deepClone(obj) {// 写法1 // let newObj = obj.constructor === Array ? [] : {} // if(typeof obj !=

原创 如何正确调试vue3源码

众所周知，目前vue3已经成为了开发vue项目的标准，最新的vue3版本已经到了3.2，但是很多人可能都还只是处于仅仅会使用的情况，而不清楚其实现原理，本文将会给大家介绍下vue3的源码调试步骤，有兴趣的小伙伴可以按照步骤学习下源码。1、github下载源码：https://github.com/vuejs/core2、使用npm安装pnpmnpm install -g pnpm@next-7（看自己的node是哪个版本的，我的node版本是14.16，所以我安装的是pnpm6）3、启动p

原创 数组对比，取出不同的值

1、比较两个数组中的值是否相同(该方法比较不了数组中的对象)代码如下：const arr1 = [11,22,33]const arr2 = [11,22,33]const result = arr1.length === arr2.length && arr1.every(a => arr2.some(b => a === b)) && arr2.every(_b => arr1.some(_a => _a === _b));2、取

原创 关于VUE3.X的一点个人使用总结

1、 子传父setup (props, ctx) {// 这里的ctx可以随便命名，它暴露了组件的三个property// Attribute (非响应式对象)console.log(ctx.attrs)// 插槽 (非响应式对象)console.log(ctx.slots)// 触发事件 (方法)console.log(ctx.emit)const changeParentNum = data => {// 通过ctx调用emit事件 需要注意的是Vue2.x中使用 $emit切

原创 ElementPlus-table与vxe-table比较

前言：最近在用vue3做项目，使用到了ElementPlus的表格功能，但是对于一页加载的数据量过大的话(我这里是一页最多加载500条)，ElementPlus-table渲染的会比较慢，造成界面卡顿，数据一直加载不出来的性能问题。这里再提一下，用vue2+element-table加载有时候也不是很快，一页500条的时候也可能会要6~10s。还得说一下的是，数据量大，渲染慢，也与你的列有关(我这里的列有32列之多，尝试只定义6列，会快很多)，如果列太多，在后端数据回来的时候，dom也会根据你定义的表格列去

原创 vue3关于Cannot find module ‘node_modules/_vue-router@4.0.10@vue-router/dist/vue-router‘ or its corre报错

报错原因：没有安装与项目中正在使用的router相应的版本，我这里使用的是router4版本，支持任何4.x的版本。项目初始阶段可能使用的是4.8.0版本的router，但是重新拉项目再npm install的时候，会更新最新的依赖包，可能就会与项目正在使用的版本不一致。so，你的项目就跑不起来…解决方法：安装对应的版本即可：cnpm i vue-router@4.0.10然后重新跑你的项目...

原创 Element-UI树形控件右键选中

element的树组件有提供鼠标右键点击的方法，直接绑定即可node-contextmenu 当某一节点被鼠标右键点击时会触发该事件 共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。然后定义一个方法：const handleRightContext = (key: any, data: any, node: any) => {//右键点击时，再触发一次左键的点击key.currentTarget.firstChild.c

原创 Vue3.0+Element Plus+ts的全局loading使用

vue3.0项目中使用创建loading.tsutils/loading.tsimport { ElLoading } from ‘element-plus’;let loading: { close: () => void; };function openLoading(){loading = ElLoading.service({body: true,lock: true,text: ‘Loading…’,spinner: ‘el-icon-loading’,backgrou

原创 遍历对象的属性--两种方法供参考

遍历对象的属性如下两种方法：第一种 for…in：let obj = {a:1,b:‘No’,c:true}function format(object) {let params = {};for(const key in object){if(object.hasOwnProperty(key)){params [key] = object[key]}}console.log(params)}调用: format(obj)第二种方法 for…of + Object.en

原创 Element-calendar设置单个日期内容

原创 有用的JS时间格式化

代码如下：formatTime(data) {const year = new Date(data).getFullYear();const month = new Date(data).getMonth() + 1;const day = new Date(data).getUTCDate();const hours = new Date(data).getHours();const minutes = new Date(data).getMinutes();return ${year}/$

原创 数组转换为键值对--精准！

let arr = [{name: “Jack”,sex: “”},{name: “Lace”,sex: “”}]取数组中的name属性，整合为一个新的数组arr = arr.map(item => {return { label: name, value: name};});

原创 数组赋值之深浅拷贝

var arr = arr1(这里arr都为数组----浅拷贝)解释：把arr1的值赋值给arr，它们的内存地址都是一样，如果在提交数据时，对此数组进行改变，会改变它的内存地址，既会改变数组原有的值改变的代码：if (arr.length !== 0) {arr.map(r => {if (r.teamUser) {r.teamUser = r.teamUser.join(",");} else {r.teamUser = “”;}});}这里改变了arr的值，上面所的，arr

原创 Vue+Element中英文切换---精准使用

1、在main.js里配置如下：import Vue from ‘vue’import App from ‘./App’import router from ‘./router’import store from ‘./store’import ElementUI from ‘element-ui’;import Cookies from ‘js-cookie’import i18n from ‘./lang’Vue.use(ElementUI, { size: Cookies.get(

原创 Element-Select绑定对象取值

Element-Select绑定对象取值<el-select v-model=“form.l3_obj” size=“mini” placeholder="请选择"value-key=“oid”><mr-option v-for=“item in productCategoryOpts” :key=“item.value.oid” :label=“item.label”:value=“item.value” />// 以下为data绑定的属性data() {return