vue后台管理知识点、难点总结01
vue后台管理知识点、难点总结
时,png格式的不能上传????(不对)
//上传相关
//图⽚上传成功
handleAvatarSuccess(res,file){
(res,file,222222);
l=;
},
//图⽚上传之前
beforeAvatarUpload(file){
//constisJPG===="image/jpeg";
constisJPG===='image/jpg'||==='image/png'||==='image/PNG'||==='image/JPG';
constisLt2M=/1024/1024<2;
if(!isJPG){
//this.$("上传头像图⽚只能是JPG格式!");
this.$("上传头像图⽚只能是JPG和PNG格式!");
}
if(!isLt2M){
this.$("上传头像图⽚⼤⼩不能超过2MB!");
}
returnisJPG&&isLt2M;
},
2js中的项⽬应⽤什么时候⽤async和await
获取分页数据的时候;获取列表,点击删除数据确定按钮、点击添加和修改的确定按钮的时候;
3添加或者编辑的时候报错:Errorinv-onhandler(Promi/async):“Error:失败”(解决,其他页
的数据正常显⽰)
4注册全局组件和⽅法
//引⼊相关接⼝API
importAPIfrom'@/api';
importCategorySeletefrom'@/components/CategorySelect'
//(组件实例的原型的原型指向的是ype)放在原型上,任意组件都可使⽤API相关的接⼝
ype.$API=API;
//注册全局组件
ent(,CategorySelete)
5深拷贝:
1.//fo=(ify(row))
fo=cloneDeep(row)
第⼆种引⼊elementui中封装的⽅法:cloneDeep
//按需引⼊lodash当中的深拷贝
importcloneDeepfrom'lodash/cloneDeep'
exportdefault{
name:'',
data(){}
.........
methods:{
fn(row){
...
fo=cloneDeep(row)
}
}
}
6v-if和v-el之间不能有任何节点,或者失效
7vue中data的数据都是响应式的,添加到data中的也是
数组的检测可以通过替换或变更(push也是变更)实现
8查看模式转为编辑模式时(span–>input)⽤$nextTick()
//单击span
toEdit(row,index){
//点击span时,切换为input,对于浏览器⽽⾔,重排重绘需要耗时间,不可能⽴即取到input键
//这是⽤$nextTick()==>当节点渲染完毕了,会执⾏⼀次
this.$nextTick(()=>{
this.$refs[index].focus();
})
=true
},
9elementui版本问题
在⽤Popconfirm⽓泡确认框时,绑定confirm事件时没有效果,原因是最新的elementui版本号(2.15.x)和模板版本号(2.13.x)不⼀
致,项⽬低,于是事件绑定改为@onConfirm="deleteAttrValue"即可
type="danger"
size="mini"
icon="el-icon-delete"
slot="reference"
>
deleteAttrValue(){
alert(333);
},
10为什么删除属性值列表不⽤发送请求(没解决)
11数组中filter
1.会返回⼀个新的数组
2.过滤的作⽤,从起始遍历,筛选需要的数据,需要返回的布尔值妖魔真要么假
12elementui中分页pagination的汉化
中添加:
//element分页组件汉化
importzhLocalefrom'element-ui/lib/locale/lang/zh-CN'//引⼊中⽂版
(ElementUI,{zhLocale})
13⽗组件想要调⽤⼦组件的⽅法(⽗组件想要获取⼦组件的属性和⽅法),可⽤$ref$childen
每次点击⽗组件中的按钮(如⽗组件列表中有修改按钮),点击修改按钮后,展⽰⼦组件的页⾯的同时,同时四个请求),怎么解决?
总结::项⽬功能需求是,每⼀次显⽰SpuForm⼦组件时,都会发四个请求。
mounted是组件挂载完毕后,只执⾏⼀次。
不能在⼦组件中的mounted中写,因为v-show只是控制SpuForm⼦组件显⽰与隐藏,这个⼦组件并没有卸载,导致mounted只执⾏⼀次
//⽗组件中封装好的⼦组件
解决思路:每次点击修改按钮时,让⼦组件发四个请求
可以给⼦组件加⼀个ref
在点击修改时的函数中可以得到⼦组件的⽅法
updateSpu(row){
=1
(this.$,999999);//可以获取到⼦组件spuForm⼦组件的,那么⼦组件的数据和⽅法也可以拿到
},
接着,在⼦组件中定义⼀个初始化⽅法。那么在⽗组件中就可以通过$refs接收到⽅法
updateSpu(row){
=1
this.$uData()
},
14⽤foreach修改服务器传过来的数据
//获取SPU图标的接⼝
letresult3=awaitthis.$ImageList();
(result3,113);
if(==200){
//由于照⽚墙显⽰图⽚的数据需要数组,数组⾥⾯的元素需要有name和url,so进⾏修改
letlistArr=;
h(item=>{
=e
=
});
geList=listArr;
}
15vue中的computed
computed必须有返回值return
every返回布尔值
filter返回的值为布尔值为真的值
computed:{
unSelectSaleAttr(){
letresult=(item=>{
((item2)=>{//不知道为啥是every,⽤some也可
`在这⾥插⼊代码⽚`AttrName!==
})
})
returnresult
}
},
16el-lect多选框可以穿多个数据,拼接⼀下即可
17项⽬中添加的数据push到收集数据的spu中,判断输⼊的是否为空
//添加新的销售属性
addSaleAttr(){
//把收集到的销售属性进⾏分割
const[baSaleAttrId,saleAttrName]=(":");
letnewSaleAttr={baSaleAttrId,saleAttrName,spuSaleAttrValueList:[]};
(newSaleAttr);
AndAttrName="";
},
//添加属性值
addSaleAttrValue(row){
(row,555);
//isible=true不是响应式的数据
this.$t(row,"inputVisible",true);
this.$t(row,"inputValue","");
},
//el-input失焦事件
handleInputConfirm(row){
(row,8888);
//this.$t(row,"inputVisible",fal);已经是响应式的了
const{baSaleAttrId,inputValue}=row
if(()==''){
this.$message('属性值不能为空')
return
}
letnewSaleAttrValue={baSaleAttrId,saleAttrValueName:inputValue}
(newSaleAttrValue)
isible=fal
},
18someeveryfilter返回的都是布尔值,需要return
//不能为空
if(()==""){
this.$message("属性值不能为空");
return;
}
//不能重复
//every和some都可,some更合理⼀些
letresult=((item)=>{
trValueName!=inputValue;
});
//或者不写{},也不⽤return
//letresult=((item)=>
//trValueName!=inputValue
//);
if(!result){
this.$message("属性值不能重复,请重新输⼊");
return;//不执⾏
}
19elementui模板请求数据
importrequestfrom'@/utils/request'
//获取SPU列表数据的接⼝/admin/product/{page}/{limit}get
exportconstreqSpuList=(page,limit,category3Id)=>request({url:`/admin/product/${page}/${limit}`,method:'get',params:{category3Id}})
//获取SPU信息/admin/product/getSpuById/{spuId}get
exportconstreqSpu=(spuId)=>request({url:`/admin/product/getSpuById/${spuId}`,method:'get'})
//获取品牌的信息/admin/product/baTrademark/getTrademarkListget
exportconstreqTradeMarkList=()=>request({url:'/admin/product/baTrademark/getTrademarkList',method:'get'})
//获取SPU图标的接⼝/admin/product/spuImageList/{spuId}get
exportconstreqSpuImageList=(spuId)=>request({url:`/admin/product/spuImageList/${spuId}`,method:'get'})
//获取平台全部销售属性(3个)/admin/product/baSaleAttrListget颜⾊,版本,尺码
exportconstreqBaSaleAttrList=()=>request({url:'/admin/product/baSaleAttrList',method:'get'})
//保存spu数据修改或者添加,携带的参数⼤致相同,唯⼀的区别是携带的参数是否带id/admin/product/saveSpuInfo
exportconstreqAddOrUpdateSpu=(supInfo)=>{
//有参数,修改
if(){
returnrequest({url:`/admin/product/updateSpuInfo`,method:'post',data:supInfo})
}el{
//⽆参数,添加
returnrequest({url:`/admin/product/saveSpuInfo`,method:'post',data:supInfo})
}
}
20在中引⼊接⼝和组件等总结
//引⼊相关接⼝API
importAPIfrom'@/api';
//(组件实例的原型的原型指向的是ype)放在原型上,任意组件都可使⽤API相关的接⼝
ype.$API=API;
//注册全局组件
importCategorySeletefrom'@/components/CategorySelect'
ent(,CategorySelete)
//element分页组件汉化
importzhLocalefrom'element-ui/lib/locale/lang/zh-CN'//引⼊中⽂版
(ElementUI,{zhLocale})
//引⼊HintButton组件
importHintButtonfrom'@/components/HintButton'
ent(,HintButton)
21map映射,可以把已有的数组数据通过return⼀个新数组
map()⽅法定义在JavaScript的Array中,它返回⼀个新的数组,数组中的元素为原始数组调⽤函数处理后的值。
注意:
map()不会对空数组进⾏检测
map()不会改变原始数组
22取消按钮,清除数据的⽅法
cancel(){
//点击取消按钮,清除数据
//:es6中新增的⽅法,可以合并对象
//组件实例this._data可以操作data当中的响应式数据
//his.$options可以获取配置对象,配置对象的data函数执⾏,返回的响应式数据为空的
(this._data,this.$())
(this._data,this.$(),'this.$options');
},
23删除某⼀页数据列表时,当也数据删除完毕之后,⾃动返回都上⼀页
align="center"
type="index"
prop="prop"
label="序号"
width="80"
>
//删除spu
asyncdeleteSpu(row){
letresult=awaitthis.$eteSpu();
(result,"888888");
if(==200){
this.$message({type:"success",message:"删除成功"});
List(>1?:-1);
}
},
24form表单中海油form
25获取的数据中不含有某个参数,这个参数需要收集,以后传给服务器
收集的过程中进⾏添加,不能放在收集的图⽚列表中,因为table列表时复选框,选中后才有
//获取图⽚
letresult=awaitthis.$ImageList();
if(==200){
//整理参数,result中午isDefault,循环添加
letlist=;
h(item=>{
ult=0//0代表设置默认1代表默认
});
geList=list
}
26可以在获取的数据中通过⼀下形式收集参数
v-model="AndValueId"是定义的
:label="me"
v-for="(attr,index)inattrInfoList"
:key=""
>
:label="ame"
:value="`${}:${}`"
v-for="(attrVal,index)lueList"
:key=""
>
27如何把获取到的部分数据添加到收集(上传服务器所需要的参数)的数据⾥⾯foreach和reduce都
可以
save(){
//整理收集数据
//平台属性
//第⼀种⽅法
//const{skuInfo,attrInfoList}=this
//letarr=[];
//h((item)=>{
//当前⽤户是否进⾏了选择
//if(AndValueId){
//const[attrId,valueId]=(":");
//letobj={valueId,attrId};
//(obj);
//}
//});
//rValueList=arr
//第⼆种⽅法
const{attrInfoList,skuInfo}=this
rValueList=((prev,item)=>{
//prev初始值[]
if(AndValueId){
const[attrId,valueId]=(":");
({attrId,valueId})
}
returnprev
},[]);
},
28获取列表数据,分页加载
//获取到的spu数据
asyncgetSpuList(pager=1){
=pager;
const{page,limit,category3Id}=this;
letresult=awaitthis.$List(page,limit,category3Id);
if(==200){
s=s;
=;
}
},
29深度选择器
30在bootcdn找依赖包
31安装echarts
npminstall--saveecharts
32map()
if(){
((item)=>{
constdataObj={
name:"",
value:[],
};
=;
[0]=onVal;
[1]=l;
[2]=ionVal;
[3]=Val;
[4]=icationVal;
[5]=sVal;
[6]=al;
[7]=al;
(dataObj);
});
}
本文发布于:2022-11-16 21:39:22,感谢您对本站的认可!
本文链接:http://www.wtabcd.cn/fanwen/fan/88/33839.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |