vue项目中遇到的问题总结

vue项目中遇到的问题总结

项目涉及技术：vueRouter+vuex+vue-cli+Axios+elementUI

• vueRouter:主要用在利用路由实现单页面的跳转，使用全局导航守卫实现用户未登陆不得使用部分功能。
• vuex：集中式存储管理一些多个组件都需要用到的数据。
• vue-cli：利用它搞定目录结构
• Axios：全局引入axios ，用于请求后端数据库的数据，实现购物车展示，订单的提交，用户登录注册等。
• elementUI：导航栏以及各种小组件。

主要问题及解决办法：

问题一：element UI组件style有scoped属性无法修改element UI组件的样式

解决：vue中scoped的功能就是实现组件私有化，实现原理就是通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用。但是element UI是全局注入，有些样式并不是我们想要的，所以如果用scoped我们就无法修改组件的样式。因此我选择不加scoped。
由于我们无法给封装好的组件加类名，所以我是先找到需要修改的元素，用组件内部的类名来更改样式，有些优先级不够高的，需要加 ! important。

例如下面代码中，修改组件table的样式：

<style >
	.el-table td,
	.el-table--border th {
	  padding: 5px 0px;
	  text-align: center;
	  border: 1px solid #ebeef5;
	}
</style >

但是这里又有一个问题，如果在很多组件中都使用了这个表格，那么就会污染到其他的表格样式，所以解决方式就是把每个需要单独定义样式的组件单独用一个类包裹起来就能达到互补干扰的效果。

问题二：element UI upload组件 图片上传

解决：upload组件是我在element UI组件中用过最好用的一个，因为它已经封装好了对图片名字处理，只要我们给出后端的接口，就直接可以给我们返回图片的URL，拿到后就可以操作啦！

例子如下：

<!-- :auto-upload="false" 取消自动上传 -->
<!-- :http-request="upLoadFile" 自定义上传方式 -->
<!-- :limit="Number(1)"限制上传数量 -->
 <!-- action="http://192.168.6.24:8001/uploadFile" 后端请求地址 -->
<el-upload  class="upload-demo" drag action="http://localhost:8001/uploadFile"
	multiple :on-success="uploadSuccess"
     :limit="Number(1)">
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">
           将图片拖到此处，或
         	<em>点击上传</em>
       </div>
       <div class="el-upload__tip" slot="tip">只能上传jpg/png图片，且不超过500kb</div>
</el-upload>

  methods: {
	 // 上传成功将图片地址存起来
	    uploadSuccess(response) {
	      this.imgUrl = response;
	      console.log(this.imgUrl);
	    },
	    // 上传失败
	    upLoadFile(file) {
	      console.log("上传失败");
	    },
    }

问题三：element UI实现表格可编辑

解决：一开始，我想达到的效果是点击编辑按钮，要修改的地方就会变成input输入框，并且将原始的数据渲染在输入框内，方便修改。

于是我在需要修改的地方插一个input，没有点击编辑时input隐藏，点击后显示，并且将原来的值绑定在input中，当我点击编辑是这一行能修改的地方都会显示input，如果仅仅是这样的话当你点击其他编辑的时候，都会显示，并且内容还是一样的，因为是循环来的，所以就需要隐藏。这里如果是选择失焦的时候隐藏，就会出现一个问题，就是当你其中一个修改完毕，失焦时，这一行都会失焦，我认为这样的效果不好，暂时我没有想到更好的优化方法，所以就选择了换一种方式实现表格可编辑。

最终方案：模态框弹出方式。将表单嵌入MessageBox组件中，修改数据后，发起ajax请求，将数据存在数据库，页面刷新，重新渲染数据库的内容。这个方法比较简单方变，代码如下：

<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!-- 修改信息对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisiblebianji"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
        validate="valRes"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="一级分类" prop="cfirstClass">
          <el-input v-model="ruleForm.cfirstClass"></el-input>
        </el-form-item>
        <el-form-item label="二级分类" prop="csecondClass">
          <el-input v-model="ruleForm.csecondClass"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="mychangeprice">
          <el-input v-model="ruleForm.mychangeprice"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="mychangeQty">
          <el-input v-model="ruleForm.mychangeQty"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </span>
    </el-dialog>

data(){
	return{
	 // 修改商品信息对话框
	      dialogVisiblebianji: false,
	      // 编辑初始参数 用于提交时是否有修改数据
	      showBtnOrdinary: true,
	      namep: "",
	      mychangepricep: "",
	      mychangeQtyp: "",
	      cfirstClassp: "",
	      csecondClassp: "",
	      cid: "",
	      // 修改表单验证对象
	      ruleForm: {
	        name: "",
	        mychangeprice: "",
	        mychangeQty: "",
	        cfirstClass: "",
	        csecondClass: "",
	      },
	      //规则
	      rules: {
	        cfirstClass: [
	          { required: true, message: "一级分类不能为空", trigger: "blur" },
	        ],
	        name: [
	          { required: true, message: "商品名称不能为空", trigger: "blur" },
	        ],
	        csecondClass: [
	          {
	            message: "二级分类不能为空",
	            trigger: "blur",
	            required: true,
	          },
	        ],
	        mychangeprice: [
	          {
	            message: "价格不能为空",
	            trigger: "blur",
	            required: true,
	          },
	        ],
	        mychangeQty: [
	          {
	            message: "库存不能为空",
	            trigger: "blur",
	            required: true,
	          },
	        ],
	      },
	}
}，
methods: {
// 点击编辑时的回调函数
	handleEdit(index, row) {
	console.log("判断数据是否被修改...")
	}
}

以上便是我在做vue项目中遇到的部分问题。(个人总结，不足请指出。）