前言
最近在公司里面一直负责写前端vue项目,之前完全没有vue开发经验,所以把开发过程中的一些问题总结下来,方便自己参考;
正文
1、路由传参取值方法:this.$route.params;
2、获取cookies的uesrname的方法:
import Cookies from 'js-cookie'
Cookies.get('username',50);
3、当重新登陆改变cookies的username的方法:(src/view/login/login.vue)
import Cookies from 'js-cookie'
Cookies.set(‘username’,username);
4、获取localStorage中username的方法:
username:localStorage.getItem('userName’);
5、提示信息方式:
(1)alert(“成功”);
(2)this.$Message.success("成功")
6、四种路由传参数:
(1)this.$axios.post('/syncJob/addAllInfo', {
taskInfo: this.taskInfo,
saInfo: this.sascheduleInfo,
sdaInfo: this.sdascheduleInfo,
requestId: this.requestId
}).then(res => {
//this.getSDA()
});
(2)this.$axios.post(`/syncJob/rejectTable/${this.requestId}/${this.tableId}`,params).then(res=>{
this.$Message.success("成功")
this.handleSearch()
});
(3)this.$axios.post(`/business_lines/`, {
businessLineName: this.BusinAdd.businessLineName,
}).then(res => {
this.hisData.list = res.data;
this.listBusinessLineAll();
});
(4)this.$axios.get('/syncJob/list', {
params: {
pageSize: this.search.pageSize,
pageNum: this.search.pageNum,
}
}).then(res => {
this.hisData.list = res.data.list;
})
7、跳转指定页面:
(1)window.location = 'http://www.baidu.com';
8、if(confirm('确定要删除吗')==true) {}
9、钩子函数created()
10、this.$router.go(0)刷新当前页面、this.$router.go(-1)返回上页面;
11、每次axios请求一次进行拦截,在src/libs/axios-config.js配置;
12、修改src/components/main/main.vue
(1)导航栏菜单控制是否显示;
(2)控制菜单栏大小;
13、右上角显示登陆人名字:src/components/main/components/user/user.vue;
14、默认输入错误参数跳转到指定页面:router/index;
17、表格固定:fixed: 'right’,控制固定右列;fixed: ‘left’,控制固定左列;
18、左侧导航栏菜单修改:main.vue修改
19、修改ico图标:public文件修改图片名字;或者public的index.html修改图标名字
20、table表格属性:
(1)//加属性判断是否可以选中该数值
v._disabled = v.syncStatus != 0;
(2)// 跳回页面选中id不取消
v._checked = multipleSelectionAll.id;
22、修复所有的eslint --fix形式:
在package.json中添加:”lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/ test/unit test/e2e/specs"
23、前端table中render函数转换数据:
render:(h,params)=> {
let dataType=params.row.datasourceType;//1.mysql, 2.oracle, 3.mongo
if (dataType==1){return h('div','mysql')};
if (dataType==2){return h('div','oracle')};
if (dataType==3){return h('div','mongo')};
},
24、函数生命周期:
created()、handlesearch()、mounted()函数;
created(){}函数创建一次,就不再创建;
handlesearch()
mounted()挂载函数;
25、设置input框不可修改:disabled;
26、this.$forceUpdate();设置强制刷新;如果数据编辑以后,没有实时渲染到table页面,看看返回值hisdata||hisdata.list;
27、this.DataEdit.datasourceType=row.datasourceType+'', //后面传空字符,将整型转换为字符串类型
28、vue遍历获取数据:
this.$axios.get('/getsyncrequest', {}).then(res => {
res.data.forEach((index)=>{
if(index.isOperator==true && index.status==3){
nCount=nCount+1;
}
});
console.log("待操作数量",nCount);
});
},
29、下拉框既可以输入也可以选择,加filterable属性;
<Select v-model="search.productLineName" @on-change="loadDatabase" style="width:180px" filterable>
<Option v-for="item,index in productLineVOList"
:value="item.productLineName"
:label="item.productLineName"
:key="index">
</Option>
</Select>
30、菜单路由导航,定义路由,但是不想导航中出现:hideInMenu: true
31、前后端交互,前端只需传给后端page-当前页,pagesize-当前页数据条数;
32、显示可清空按钮:开启属性 clearable 可显示清空按钮;
33、vue中scoped只作用于当前页面,去掉之后作用于全局;使用deep影响到子组件;
34、css调整组建位置:
(1)float:right调整整行button等组件大体位置;
(2)margin-right、margin-left、maring-bottom,调整组件分别距离左边、右边、上边多少;
(3)text-align:center;调整组件当中文字位置;
35、vue遍历数组、对象的写法:
(1)filter写法:this.hisData.list = res.data.filter(v => !v.delFlag);
(2)map写法:this.selectIndexId = val.map(v => v.id);
(3)js遍历json数组对象,并且去除content的值:
var typeArr = new Array();
for(var i = 0;i<infoList.length;i++)
{
typeArr.push(infoList[i].type) //获取到type的值
for(var j = 0;j<infoList[i].typeList.length;j++)
{
var info = infoList[i].typeList[j];
alert(info.ID);
alert(info.startDate);
alert(info.endDate);
alert(info.adultNum);
alert(info.childrenNUm);
}
};
36、表格缩小 :<table size=“small”>
37、禁用按钮能够选中:disabled:true;
38、友情链接+文字提示+新标签窗口打开链接(target="_blank”):
<Tooltip content="元数据系统" style="margin-top: 8px">
<a style="margin-top: 8px;margin-right: 10px" href="http://meta.finupgroup.com" target="_blank"><img
src="../../../src/assets/images/元数据系统.png"></a>
</Tooltip>
39、获取cookies用户信息:
import Cookies from 'js-cookie'
Cookies.get('userName');
40、每两秒调用一次函数:
mounted(){
this.getData();
setInterval(this.getData, 2000);
},
41、解决图片溢出:
series: [
{
type: 'pie',
radius: '50%', // 控制图片大小
center: ['44%', '60%'], // x轴 、y轴
boundaryGap: true, // 坐标轴两边是否留白(解决图片溢出)
}
]
参考资料