Vue+ElementUI后台管理项目问题方法总结

布克吉

已于 2024-08-08 15:16:33 修改

阅读量1.1k

点赞数 35

文章标签： elementui 前端 javascript vue.js

于 2024-03-12 16:52:45 首次发布

本文链接：https://blog.csdn.net/weixin_57798646/article/details/130680709

版权

✅ 作者 : 布克吉

🍎简介 : 专注于前端开发，微信小程序，后台管理（Vue+React）

本博客主要用于分享前端技术知识，更多内容请看下方👇

✨人生态度：☀️Eventually everything will be fine！☀️

🔥前言

本文章作为个人工作项目总结，积累开发经验，主要针对后台管理项目的开发，包括一些ES6语法，js方法的介绍。有不清楚的或者错误的地方，欢迎评论区讨论。

如果对您有帮助，欢迎收藏、点赞+关注！

1.数组去重 Array.from(new Set( ));

2.翻转键值对

3.el-dialog 弹框设置最小宽度

4.Promise.settle 用法

5.Vuex的 actions中请求数据并存储在store中

6.手写一个switch，只用于数据展示，不可点击，显示三种状态

7.数组_Observer无法遍历问题(三种解决方法)

8.垂直居中 align-items ：flex-start

1.数组去重 Array.from(new Set( ));

例：

Array.from(new Set(['4','6','8','6'])); // ['4','6','8']

2.翻转键值对

方法一：key和value互换位置，已经封装好，可直接用swapKeyValues(data)

// 翻转键值对
swapKeyValues(data){
    const result = Object.entries(data).map(
        ([prop, propValue]) => 
            { 
                return [propValue, prop]; 
            });
    return Object.fromEntries(result);
},


let arr = {
	a:1,
	b:2
}

let newArr = swapKeyValues(arr)
console.log(newArr);
/* {
	1:a,
	2:b
} */

方法二：

const invert = (obj) => Object.keys(obj).reduce((res, k) =>
 Object.assign(res, { [obj[k]]: k }), {})
invert({name: 'jack'}) // {jack: 'name'}

3.el-dialog 弹框设置最小宽度

使用custom-class定义一个类名，css设置样式（弹框不要给百分比宽度属性，他的优先级比较高会覆盖设置的最小宽度）

<el-dialog 
    :visible.sync="dialogSyncLibrary"
    custom-class="syncwidth"
    style="border-radius: 10px;height: 950px;"
></el-dialog>

/deep/ .syncwidth{
		min-width: 960px;
	}

4.Promise.settle 用法

什么情况下使用？

当一次或一个请求的结果无法满足需求，需要等全部结果返回后再做处理时。

Promise.all与Promise.allSettled区别 ?

使用方法相同。

all当有请求失败时，请求队列就被终止，allSettled不管失败与否，会执行完所有请求。

第一步，定义异步函数

PUBindPlatform(request) {
	return new Promise((resolve, reject) => {
		let _this = this
		_this.$Api.PUBindPlatform({
			request
		}).then(function(res) {
			let response = res.data.response
			if (response.errorCode === '200') {
				resolve()
			} else {
                reject()
			}
		})
	})
},

第二步，将函数添加进执行队列

let promises = []
//将需要异步的函数push进去
promises.push(this.PUBindPlatform(request))

第三步，获取返回结果，下一步处理

if (promises.length > 0) {
	Promise.allSettled(promises).then(response => {
		console.log(response);
        //结果为数组形式 遍历response
        response.forEach(item=>{
            if(item.status=="fulfilled"){
                //resolve返回的结果
                console.log(item.value)
            }else if(item.reason=="reject"){
                //reject返回的结果
                console.log(item.value)
            }

        })
        
	})
}