Vue2+ElementUI2开发常见问题

原创

于 2021-04-25 15:22:24 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #elementui

本文介绍了在Vue2和ElementUI开发中遇到的一些常见问题及其解决方案，包括Promise的并发处理，ElementUI输入框number类型的正则校验，页面切换缓存，文字省略号显示，子组件与父组件的交互，params和query的传值区别，el-autocomplete下拉框宽度，el-tree懒加载，/deep/使用误区，以及Vue项目中配置和使用scss样式时的常见错误。

Promise多个执行成功回调和单个执行成功回调

promise用法

new Promise(function(resolve, reject){
   
   
    //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //写代码进行判断，返回内容作为then或catch的接收值
    if( null === null) {
   
   
    	resolve("成功!"); //代码正常执行！
    } else {
   
   
    	reject("失败!"); //代码执行失败！
    }
})
.then(function (results) {
   
   
    console.log(results); // 成功!
})
.catch(function (results) {
   
   
    console.log(results); // 失败!
})

多个请求之后再进行操作可以用到Promise.all()

Promise.all([this.promiseObj1(), this.promiseObj2(), this.promiseObj3(), this.promiseObj4()])
        .then(res => {
   
   
          console.log(2333, res)
        }).catch(error => {
   
   
          console.log('获取数据失败')
        })

多个请求只要有一个返回即可触发后续操作，用Promise.race()

Promise.race([this.promiseObj1(), this.promiseObj2(), this.promiseObj3(), this.promiseObj4()])
        .then(res => {
   
   
          console.log(2333, res)
        }).catch(error => {
   
   
          console.log