前言
最近在公司里面一直负责写前端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="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, // 坐标轴两边是否留白(解决图片溢出)
}
]
参考资料