关于 VUE + Element-UI 的一些新手工作经验

最新推荐文章于 2023-05-23 15:03:49 发布

俄城Wes

最新推荐文章于 2023-05-23 15:03:49 发布

阅读量417

点赞数 1

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

本文链接：https://blog.csdn.net/AaronAaronnnn/article/details/125660219

版权

本文详细介绍了在 Vue 项目中使用 Element-UI 的常见问题与解决方法，包括单双引号的使用、v-if 与 v-show 的区别、Promise.all 的应用以及生命周期的理解。在使用 Element-UI 中，讨论了自定义组件样式、el-table 的问题及解决策略，如固定列的样式调整、合计列的计算等。同时提到了在多张表和 el-select 组件中的注意事项。

摘要由CSDN通过智能技术生成

VUE

1.单双引号

当使用 vue 动态绑定时里边的内容要用单引号否则会编译错误

如: v-if="msg == 'abcdef'"

@click = "event('abcdefg')"

2.v-if 与 v-show

	手段	编译过程	编译条件	性能消耗	使用场景
v-if	动态的向DOM树内添加或者删除DOM元素	v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件	惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);	更高的切换消耗	适合运营条件不大可能改变
v-show	通过设置DOM元素的display样式属性控制显隐	v-show只是简单的基于css切换	v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；	更高的初始渲染消耗	适合频繁切换

3.Promise.All

将所需后台接口名填充到 Promise 数组里可按顺序执行

    let obj = [];

    for(let i = 0;i < 3;i++){

        obj.push(addPersonAxiosInterface1("王小明","19","男"));
        obj.push(addPersonAxiosInterface2("王二明","29","男"));
        obj.push(addPersonAxiosInterface3("王久明","39","男"));

    }

    Promise.all(obj).then((res)=>{console.log(res);})

    //顺序执行addPersonAxiosInterface1,addPersonAxiosInterface2,addPersonAxiosInterface3