vue+elementUI项目的踩坑~~持续更新

最新推荐文章于 2024-05-29 10:40:22 发布

weixin_33881050

最新推荐文章于 2024-05-29 10:40:22 发布

阅读量941

点赞数

文章标签： javascript 人工智能 ViewUI

原文链接：https://juejin.im/post/5b03e35b6fb9a07aa9260f35

版权

日常工作记录，如果对你有帮助请点亮小~心~心喔~~~ 接受礼貌的批评指导

1、el-form只有一个搜索条件时页面刷新问题；

2、el-tree树形控件，给项目安装jsx语法；

3、el-cascader（foreach和箭头函数）获得选项更多信息；

4、Vue实现对数组、对象的深拷贝、复制

5、input关于金额输入限制（正则表达式~）

6、子元素设置margin-top，父元素被影响了~

7、导航类目效果（动态class+v-if显示隐藏）

8、列表多张图片上传（el-upload+箭头函数）

一、el-form自动刷新页面

代码：

 <el-form :inline="true"  size="small" ref="form">
            <el-form-item label="姓名">
              <el-input v-model="name" size="small" @keyup.native.13="search" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="search">搜索</el-button>
            </el-form-item>
 </el-form>
复制代码

问题：

输入框写完，Enter一下。/admin/Index/permissions/administer?。网址就跑出来一个问号，自动刷新页面；

解决方案：

姓名 <el-input v-model="name" style="width:150px;" size="small" 
     @keyup.native.13="search" clearable>
     </el-input>
    <el-button type="danger" size="small"  @click="search">搜索</el-button>
复制代码

原因：

赤裸裸打脸。。。啪啪响

链接：element.eleme.io/#/zh-CN/com…

二、 tree 树形控件时需要动态添加DOM元素

问题：

其中 renderContent 函数中返回的内容会报错；

原来是缺少相应的依赖，因为 renderContent 方法用到了jsx语法，所以需要要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。

办法：

(指令框)

 npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev
复制代码

(.babelrc文件）

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}

复制代码

三、el-cascader（foreach和箭头函数）

问题：

  <el-cascader expand-trigger="hover"  placeholder="请下拉选择"
                         :show-all-levels="true" :options="chuli" :props="defaultProps" v-model="postMsg.chooseid"
                         @change="test">
  </el-cascader>
复制代码

假如选定了羊毛毛衣，因为defaultProps配置的值value是数组中的id,只能获得数据id组[1,22,33]，但是还需要名称组[服装，毛衣，羊毛毛衣]；

   data(){
            return {
              chuli:[],
              defaultProps: {
                label: 'name',
                children:'list',
                value:'id'
              },
              postMsg:{
                  choosename:[],
                  chooseid:[],
                   catetype:[],
              },
         }
     }
复制代码

chuli:后台返回的数据；

解决：（使用foreach和箭头函数，通过得到的id组去得到name组）

调用@change数据变化的方法：


   test:function(value){
            let names=[];
           let type=[];
            value.forEach(o=>{
                findName(this.chuli,o,names,type);
            });
            this.postMsg.choosename=names;
            this.postMsg.chooseid=value;
            this.postMsg.catetype=type;
   },

复制代码

//    通过id遍历名字
    function findName(list,value,names,type) {
        if(list!=undefined){
          for(let i=0;i<list.length;i++){
            if(list[i].id===value){
              names.push(list[i].name);
              type.push(list[i].catetype);
              return;
            }else{
              findName(list[i].list,value,names,type);
            }
          }
        }
    }
复制代码

四、Vue实现对数组、对象的深拷贝、复制

问题：

//对于数组
 var a = [1,2,3];
 var b = a;
 b.push(4); // b中添加了一个4
 alert(a); // a变成了[1,2,3,4]
复制代码

//对于对象
var obj = {a:1};
var obj2 = obj;
obj2.a = 2; // obj2.a改变了，
alert(obj.a); // 2，obj的a跟着改变
复制代码

原因：

当组件间传递对象时，由于此对象的引用类型指向的都是一个地址；除了基本类型和null其他的“=”赋值都等同于是赋予地址，实际上都是同一个地址，修改值均会改变。

五、input关于金额输入限制（正则表达式~）

详情代码：

<input type="text" v-model="payMoney" @keyup="amount"/>
 amount(){
    let regStrs = [
      ['^(\\d+\\.\\d{2}).+', '$1'], //禁止录入小数点后两位以上
      ['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点
      ['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上，但首位为0
      ['^0(\\d+\\.)', '$1'], //禁止输入小数，首位添加0
      ['\\-(\\d?)','$1'],//禁止输入-  负数
      ['^\\.(\\d?)','$1'],//禁止小数点开头
      ['[^\\d\\.]+$', ''],//禁止录入任何非数字和点
    ];
    for(let i=0; i<regStrs.length; i++){
      let reg = new RegExp(regStrs[i][0]);
      this.payMoney =this.payMoney.replace(reg, regStrs[i][1]);
    }
  },
复制代码

六、子元素设置margin-top，父元素被影响了~

。。。想着第一个子元素，直接margin-top直接距离顶部空出来，结果直接作用到父元素身上了。。。原因解析：

父元素如果没有上补白(padding-top)和上边框(border-top)，父元素的上边距margin会和其第一个子元素的上边距重叠。

解决办法：

给父元素设置有效的 border或者padding；

  <div class="AdminLogin">
    <div class="loginBox">
       中间登录框内容
    </div>
  </div>
 .loginBox{
    width: 494px;
    height:500px;
    margin:269px auto 240px auto;
    background-color: #fff;
    box-shadow: 0 11px 24.57px 2.43px rgba(0, 0, 0, 0.42);
    padding:50px 87px 98px 87px;
    text-align: center;
  }
 .AdminLogin{
    width: 100%;
    height: 1080px;
    background: url(../assets/Admin/background.png) no-repeat left 100%; 
    padding-top: 269px;
    /*padding-top: 269px;*/第一种方法
     /*border:1px solid #f2f2f2;*/第二种方法
  }
复制代码

七、导航类目效果（动态class+v-if显示隐藏）

效果演示：

简介：

主要是一个三级分类数据的处理，左侧栏目点击右侧展示对应的的分类；悬停有分类展示；涉及到样式的动态切换，和内容的显示隐藏；

代码：

   <div class="classifyLeft_Box">
           <div class="left_top" @click="allClass">查看全部紧固件</div>
           <ul class="left_list">
             <li v-for="(son,index) in classifyData" :key="index" v-bind:class="{liActive:active===index||detailActive===index}"
                 v-on:mouseenter="detailActive=index" v-on:mouseleave="detailActive=-1"  @click="classClick(index)">{{son.name}}</li>
           </ul>
           <div class="list_detail" v-if="detailActive!==-1" v-on:mouseleave="detailActive=-1">
                 <ul v-for="(itemOne,oneindex) in classifyData" :key="oneindex" v-if="oneindex===detailActive"
                     v-on:mouseenter="detailActive=oneindex">
                    <li class="detail_level2" v-for="(itemTwo,twoindex) in itemOne.list" :key="twoindex">
                      <a class="level2_title" :title="itemTwo.name" :href="'/searchpage/classifyProduct?pageNo=1&pageSize=12&type=0&level2id='+itemTwo.id">{{itemTwo.name}}</a>
                      <div class="level2_content">
                        <a v-for="(itemThree,threeindex) in itemTwo.list" :key="threeindex" :title="itemThree.name" :href="'/searchpage/classifyProduct?pageNo=1&pageSize=12&type=0&level3id='+itemThree.id" >{{itemThree.name}}</a>
                      </div>
                    </li>
                 </ul>
           </div>
         </div>
复制代码

export default {
    name: "IndustrialClassify",
    data() {
        return {
          classifyData:[],
          active:-1,
          detailActive:-1,
        };
    },
    methods: {
      allClass(){this.active=-1},
      classClick(index){this.active=index;},
    },
复制代码

}

 .classifyLeft .classifyLeft_Box .left_list li.liActive{
    background:#FFFFFF;
    color:#E8000E;
    font-weight:600;
    }
复制代码

八、列表多张图片上传（el-upload+箭头函数）

 <div class="img-item" v-for="(item,index) in imgJson" :key="index">
     <el-upload class="avatar-uploader2" action=""  :http-request="(option)=>imgJsonupload(option,index)" :show-file-list="false">
         <img v-if="item.img" :src="$oss.publicUrl(item.img)" class="avatar2">
         <i v-else class="el-icon-plus avatar-uploader2-icon"></i>
     </el-upload>
</div>
复制代码

        imgJson:[
          {img:'', cateid:[], catename:'', type:'',},
          {img:'', cateid:[], catename:'', type:'',},
          {img:'', cateid:[], catename:'', type:'',},
          {img:'', cateid:[], catename:'', type:'',},
          {img:'', cateid:[], catename:'', type:'',},
          {img:'', cateid:[], catename:'', type:'',},
          {img:'', cateid:[], catename:'', type:'',},
          {img:'', cateid:[], catename:'', type:'',},
          {img:'', cateid:[], catename:'', type:'',},
          {img:'', cateid:[], catename:'', type:'',}
        ],
 //楼层商品图上传
      imgJsonupload(option,index){
        let vue = this;
        let value = option.file;
        vue.$oss.upload(vue, 'data/floor/images', [{key:vue.$oss.genKeyName(), value:value }], true,
          function (path) {
//            console.log(path);
            option.onSuccess();
            vue.imgJson[index].img = path;
          },
          function (error) {
            console.log(error);
            option.onError();
          })
      },
复制代码

weixin_33881050

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue+elementUI项目的踩坑~~持续更新

日常工作记录，如果对你有帮助请点亮小~心~心喔~~~ 接受礼貌的批评指导目录：1、el-form只有一个搜索条件时页面刷新问题；2、el-tree树形控件，给项目安装jsx语法；3、el-cascader（foreach和箭头函数）获得选项更多信息；4、Vue实现对数组、对象的深拷贝、复制5、input关于金额输入限制（正则表达式~）6、子元素设置margin-top，父元素被影...
复制链接

扫一扫