日常工作记录，如果对你有帮助请点亮小~心~心喔~~~ 接受礼貌的批评指导
目录：
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自动刷新页面
代码：
"true" size="small" ref="form">
"姓名">
"name" size="small" @keyup.native.13="search" clearable>
type="danger" @click="search">搜索
复制代码问题：
输入框写完，Enter一下 。/admin/Index/permissions/administer?。网址就跑出来一个问号，自动刷新页面；
解决方案：
姓名 "name" style="width:150px;" size="small"
@keyup.native.13="search" clearable>
type="danger" size="small" @click="search">搜索
复制代码原因：
赤裸裸打脸。。。啪啪响
链接：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和箭头函数）
问题：
"hover" placeholder="请下拉选择"
:show-all-levels="true" :options="chuli" :props="defaultProps" v-model="postMsg.chooseid"
@change="test">
复制代码假如选定了羊毛毛衣，因为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;iif(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关于金额输入限制（正则表达式~）
详情代码：
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; ilet 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；
"AdminLogin">
"loginBox">
中间登录框内容
.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显示隐藏）
效果演示：
简介：
主要是一个三级分类数据的处理，左侧栏目点击右侧展示对应的的分类；悬停有分类展示；涉及到样式的动态切换，和内容的显示隐藏；
代码：
"classifyLeft_Box">
"left_top" @click="allClass">查看全部紧固件
"left_list">
- "(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}}
"list_detail" v-if="detailActive!==-1" v-on:mouseleave="detailActive=-1">
"(itemOne,oneindex) in classifyData" :key="oneindex" v-if="oneindex===detailActive"
v-on:mouseenter="detailActive=oneindex">
- "detail_level2" v-for="(itemTwo,twoindex) in itemOne.list" :key="twoindex">
"level2_title" :title="itemTwo.name" :href="'/searchpage/classifyProduct?pageNo=1&pageSize=12&type=0&level2id='+itemTwo.id">{{itemTwo.name}}
复制代码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+箭头函数）
"img-item" v-for="(item,index) in imgJson" :key="index">
"avatar-uploader2" action="" :http-request="(option)=>imgJsonupload(option,index)" :show-file-list="false">
![]()
"item.img" :src="$oss.publicUrl(item.img)" class="avatar2">
"el-icon-plus avatar-uploader2-icon">
复制代码 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();
})
},
复制代码