vue-项目使用过程中遇到的一些问题

最近项目比较忙，五一前要把初版做完，周六加了一天班，今天收尾，明天做测试联调，改改bug，后面再找用户提提意见，估计晃晃悠悠就到五一了。

项目确实让人成长，我是个新手，项目过程中不是难免，是必定遇到了很多问题，我想记下来，一些技术上的盲点，还有一些思维上的盲点。

问题一 Cannot read property ‘xxx’ of undefined 这类问题

这个错误，在vue代码撰写中经常遇到。

原因主要分为这几类

原因一、你调用的数据没有初始化

解决方法，在你使用前进行初始化操作，或者一开始就在mouted中定义好，就像你会先在data里声明很多对象，需用用的时候直接使用this去拿。

原因二、你调用了当前对象没有的属性

你调用的对象中没有你想要的属性，自然是拿不到的，注意链式调用是你返回的到底是什么，中间是不是有空值。

解决方法，实现声明，但有的没有就是没有

原因三、你传入的类型不对

最常见的例子，他要传个函数，你传了一个对象

原因四、你调用的对象他空了，他是undefined,Nan,null

解决方法，提前声明，获取的对象要提前判空

单个数值用三目运算符，对象，建议自己写个方法

总结，其实这玩意就跟java空指针差不多，基本你java怎么做的，js也怎么做。你java遍历中间空指针会直接结束，js也是这样。

/*** 判断非空（包含 undefined、null、NaN、空字符串）* @param {*} data*/
export function isNotNull(data) {if(data == undefined || data == null || data == NaN || data == '') {return false}return true
}/*** 判断空（包含 undefined、null、NaN、空字符串）* @param {*} data*/
export function isNull(data) {if(data == undefined || data == null || data == NaN || data == '') {return true}return false
}

问题二、使用elementui时，如何调节一些内部样式

说实话，新人，不是从项目开头做起，其实很多东西，以前老前辈都做的差不多了，基本这粘贴一段，那粘贴一段，真到了要自己写组件的时候，还真的要下点心思的，周六加班，画了个穿梭框，用的elementui的穿梭框，但中间各种问题，专门拿出来讲一讲。

这次我是做了wms里的一个盘点模块，要求让用户选完仓库后，自动弹出一个穿梭框，让用户自己勾选物料。我自己找了半天，在CSDN和知否上翻了半天也没找到解决方法，几个解决方法都是那种只能解决一半，根本没法彻底解决。最终还是问的边上的大哥。顺便学到了一点js的调试知识。

因为穿梭框，除了主框体还有内部两个小框体，搜索栏，按钮，标题等内部组件，elementui文档也没有写如何更改这方面的样式。解决方法：

步骤一：浏览器 F12打开调试模式

步骤二：点击这个鼠标箭头的表示，然后点击页面元素，他可以直接跳到当前元素对应的css

我点击了elementui官网的穿梭框组件的标题，它会自动指向这个元素，并且边上会显示他的css样式，这时候你就可以调试你想要的样式尺寸。

步骤三：复制样式类型，写到style里

顺便介绍一些几个js基础知识。

scoped 让css只在当前页面生效，他会在你的样式后生成一个hash值，让你的样式不会重复

/deep/ 和 >>> 这两个都是深度选择器，意义一样比scoped更好用深度选择器在你调用别人的组件，又想拥有自己的样式，就可以使用/deep/ 写在css前面

！important 样式内部存在层级覆盖，使用！important 让你的样式不被覆盖

>>> .el-transfer-panel {border: 1px solid #ebeef5;border-radius: 4px;overflow: hidden;background: #fff;display: inline-block;vertical-align: middle;width: 400px !important;max-height: 100%;box-sizing: border-box;position: relative;
}

问题三、在前端卡控输入内容，表单校验

表单校验有很多种方式，在这里只说两种 vue原生的rule 还有elementui提供的绑定事件

vue原生

<el-form ref="form" :inline="true" :model="form" label-width="280px" id="userForm" style="margin-top:10px;":rules="rules"><el-row type="flex"><el-col :span="10"><el-form-item label="登录名" prop="loginName"><el-input v-model="form.loginName" class="input-common-width" :maxlength="60" style="width:250px;"clearable></el-input></el-form-item><el-form-item label="性别" prop="gender"><el-switch v-model="form.gender" active-text="男" inactive-text="女"></el-switch></el-form-item><el-form-item label="身份证号"><el-input v-model="form.idCard" class="input-common-width" :maxlength="18" style="width:250px;"clearable></el-input></el-form-item><el-form-item label="归属单位" prop="companyId"><div style="width: 360px"><el-select filterable v-model="form.companyId" placeholder="请选择单位" @change="selectCompany"class="input-search-width" style="width:250px"><el-option v-for=" option in companyList" :key="option.companyId" :label="option.companyName ":value="option.companyId"></el-option></el-select><el-checkbox v-model="form.isCompanyManager" style="margin-left:10px">单位负责人</el-checkbox></div></el-form-item><el-form-item label="归属部门" prop="officeId"><div style="width: 360px"><el-select filterable v-model="form.officeId" placeholder="请选择部门" class="input-search-width"style="width:250px"><el-option v-for=" option in officeList" :key="option.officeId" :label="option.officeName ":value="option.officeId"></el-option></el-select><el-checkbox v-model="form.isOfficeManager" style="margin-left:10px">部门负责人</el-checkbox></div></el-form-item></el-col><el-col :span="12"><el-row style="margin-top:15px"><el-form-item label="照片"><el-upload class="avatar-uploader" :action="fileuploadurl" :show-file-list="false":on-success="handleAvatarSuccess" style="height:151px;width:100px"><img v-if="form.avatar" :src="form.avatar"class="avatar" style="height:151px;width:100px"><i v-else class="el-icon-plus avatar-uploader-icon" style="height:151px;width:100px"></i></el-upload></el-form-item></el-row><el-row style="margin-top:2px"><el-form-item label="年龄" prop="age"><!--min  最小数量 maxlength 最大长度 --><el-input v-model="form.age" class="input-width" @input="checkNumber()" min="18"                 maxlength="3" clearable></el-input></el-form-item></el-row><el-row style="margin-top:2px"><el-form-item label="邮箱"><el-input v-model="form.email" class="input-common-width" :maxlength="60" clearable></el-input></el-form-item></el-row></el-col></el-row><el-row><el-col :span="10"><el-form-item label="姓名" prop="name"><el-input v-model="form.name" class="input-common-width" :maxlength="60" clearable></el-input></el-form-item></el-col><el-col :span="14"><el-form-item label="手机号"><el-input v-model="form.mobile" class="input-common-width" :maxlength="11" clearable></el-input></el-form-item></el-col></el-row><el-row><el-col :span="10"><el-form-item label="电话"><el-input v-model="form.phone" class="input-common-width" :maxlength="60" clearable></el-input></el-form-item></el-col><el-col :span="14"><el-form-item label="民族"><el-select v-model="form.nation" placeholder="请选择民族" class="input-width" clearable filterable><el-option v-for="item of nationCodeList" :key="item.decodeId" :label="item.decodeValue":value="item.decodeId"></el-option></el-select></el-form-item></el-col></el-row><el-row></el-row><el-row><el-form-item label="角色" prop="role"><el-checkbox-group v-model="form.role" class="rolesClass" :style="{width: myWidth}" id="check"><el-checkbox v-for="item in roles" :key="item.roleId" :label="item.roleId" :value="item.roleId"class="boxClass">{{item.roleName}}</el-checkbox></el-checkbox-group></el-form-item></el-row><el-row><el-form-item label="来源类型"><el-select v-model="form.sourceType"  filterable clearable    class="input-common-width" ><el-option v-for="item in sourceTypeList"  :key="item.decodeId" :label="item.decodeValue":value="item.decodeId"></el-option></el-select></el-form-item></el-row><el-row><el-form-item label="备注"><el-input v-model="form.remarks" type="textarea" :rows=4 style="width: 360px;" :maxlength="60"clearable></el-input></el-form-item></el-row><el-row><el-form-item label="是否启用"><el-switch v-model="form.useable" active-text="是" inactive-text="否" style="margin-left:40px;"></el-switch></el-form-item></el-row></el-form>

rules: {loginName: [//required 是否必须  如果不符合条件提示什么          在什么时候触发 blur 失去焦点  change 提交{required: true, message: '请填写登录名称', trigger: 'blur'}],name: [{required: true, message: '请填写姓名', trigger: 'blur'}],sourceType: [{required: true, message: '来源类型不能为空', trigger: 'change'}],role: [//type 制定提交类型{type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change'}],gender: [{required: true, message: '性别不能为空', trigger: 'change'}],companyId: [{required: true, message: '单位不能为空', trigger: 'change'}],age: [{required: true, message: '年龄不能为空', trigger: 'blur'},{validator: validateAmount, trigger: 'blur'}//validator 制定验证的方法]},

vue原生的验证基本满足了一般的需求，但只用rules 事件略少，所以可以选择绑定事件，例如elementui提供的一些事件绑定

<!-- 使用oninput 绑定正则 ，实时监听输入 ，这段代码的意思是 只能输数字和小数点 别的什么都输入不出来-->
<el-input type="text" v-model="scope.row.firstAmount" maxlength="5"oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"class="input"></el-input>

问题四、分页，前端分页？后端分页，筛选选中内容，批量选中？

先自己回答一下，后端分页，后端筛选，前段选中

前两天，组长叫我改一个bug，之前留下的问题，选中的物料，依然在选择菜单里，没有筛选掉，增加一个批量选中的功能。

批量选中没啥好说，反倒是分页和筛选，我觉得是个业务问题。代表我最近脑子不好了。

我一开始想在前段筛掉数据，但出现一个问题，分页是后端，我前段筛掉数据后，这一页数据可能就没了，留个空。

而且就算这样，那我关掉选择页面，再触发一次搜索，数据又回来了，我一开始想做成前端分页作为解决方法，前端分页，前端筛选，实际证明。费力不讨好，还丑。

说下最终的解决方法

我前段点击添加的时候，把当前已选的内容传回后端，让后端筛掉这部分数据，再返回，这个筛选必须放在存入页码数据之前。

这样前段就没有什么改变，只在搜索的时候，多返回一个参数。后端sql里多一个notin的list。

批量选中没啥好说，反倒是分页和筛选，我觉得是个业务问题。代表我最近脑子不好了。

我一开始想在前段筛掉数据，但出现一个问题，分页是后端，我前段筛掉数据后，这一页数据可能就没了，留个空。

说下最终的解决方法

我前段点击添加的时候，把当前已选的内容传回后端，让后端筛掉这部分数据，再返回，这个筛选必须放在存入页码数据之前。

这样前段就没有什么改变，只在搜索的时候，多返回一个参数。后端sql里多一个notin的list。