项目使用了eslint，webstorm格式代码时不会按照 eslint 规则去格式化代码
在项目根目录找到 .eslintrc.js 文件并右键，菜单底部有一个 “Apply ESLint Code Style Rule” ，点击它，之后格式化代码时就会按照 eslint 的规则了
另外 右键单单击 然后点 Fix ESLint Problems 可快速修复eslint检测问题。
跨域问题
Access to XMLHttpRequest at 'https://www.baidu.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
第一步：在项目根目录下创建vue.config.js文件（如已存在忽略），在vue.config.js文件增加代理。
module.exports = {
devServer: {
proxy: {
//跨域问题
//Access to XMLHttpRequest at 'https://www.baidu.com/' from origin 'http://localhost:8080' has been
// blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
'/api': {
// 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
target: 'https://www.baidu.com/',
// 允许跨域
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
第二步：使用代理来发起网络请求
methods: {
testAxios() {
// 由于 main.js 里全局定义的 axios,此处直接使用 $axios 即可。
// 经过 vue.config.js 配置文件的代理设置，会自动转为 https://www.baidu.com/，从而解决跨域问题
this.$axios.get('/api').then(response => {
if (response.data) {
console.log(response.data)
}
}).catch(error => {
console.log(error)
})
}
}
el-table 双层循环
表格数据：
data: function () {
return {
stockTableHead: ['序号', '股票代码', '股票简称', '业绩预告类型', '业绩预告摘要', '净利润变动幅度(%)', '上年同期净利润(元)', '公告日期'],
stockTable: []
}
}
stockTable数据结构：
[
[
"1",
"000016",
"深康佳A",
"业绩大幅上升",
"净利润79000万元至99000万元,增长幅度为65.40%至107.27%",
"107.27",
"4.78亿",
"2022-01-25"
],
[
"2",
"000025",
"特力A",
"业绩大幅上升",
"净利润12700万元至13300万元,增长幅度为120.26%至130.66%",
"130.66",
"5766.38万",
"2022-01-25"
],
[
"3",
"000037",
"深南电A",
"业绩预亏",
"净利润-43600万元左右,下降幅度为780.99%左右",
"-780.99",
"6402.43万",
"2022-01-25"
]
]
<el-table
:data="stockTable"
style="width: 100%">
<el-table-column
v-for="(headItem,position) in stockTableHead"
:key="position"
:label="headItem"
>
<!-- scope.row代表stockTable数组中的元素 -->
<template slot-scope="scope">
<span>{{ scope.row[position] }}</span>
</template>
</el-table-column>
</el-table>
文字超出长度限制末尾加省略号
.text-flow-ellipsis-multiple {
/* 多余内容省略号处理-多行 */
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.text-flow-ellipsis-single {
/* 多余内容省略号处理-单行 */
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.text-ellipsis-end {
/* 多余内容省略号处理-单行 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
其它问题
1.元素设置成宽度100%，不能设置margin或padding值，否则会把视图撑到屏幕外
2.flex 设置flex-wrap：nowarp 宽度必须设置100% 否则子元素会一直撑着宽度，不会缩放
3.flex中如果某个元素felt-grow:1，导致未设置felt-grow宽度或高度被挤小的情况，请设置最小宽度或最小高度
