項(xiàng)目使用了eslint残拐，webstorm格式代碼時(shí)不會(huì)按照 eslint 規(guī)則去格式化代碼
在項(xiàng)目根目錄找到 .eslintrc.js 文件并右鍵，菜單底部有一個(gè) “Apply ESLint Code Style Rule” 贾虽，點(diǎn)擊它，之后格式化代碼時(shí)就會(huì)按照 eslint 的規(guī)則了
另外 右鍵單單擊 然后點(diǎn) Fix ESLint Problems 可快速修復(fù)eslint檢測(cè)問題牲尺。
跨域問題
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.
第一步：在項(xiàng)目根目錄下創(chuàng)建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': ''
}
}
}
}
}
第二步：使用代理來發(fā)起網(wǎng)絡(luò)請(qǐng)求
methods: {
testAxios() {
// 由于 main.js 里全局定義的 axios,此處直接使用 $axios 即可烟瞧。
// 經(jīng)過 vue.config.js 配置文件的代理設(shè)置，會(huì)自動(dòng)轉(zhuǎn)為 https://www.baidu.com/染簇，從而解決跨域問題
this.$axios.get('/api').then(response => {
if (response.data) {
console.log(response.data)
}
}).catch(error => {
console.log(error)
})
}
}
el-table 雙層循環(huán)
表格數(shù)據(jù)：
data: function () {
return {
stockTableHead: ['序號(hào)', '股票代碼', '股票簡(jiǎn)稱', '業(yè)績(jī)預(yù)告類型', '業(yè)績(jī)預(yù)告摘要', '凈利潤(rùn)變動(dòng)幅度(%)', '上年同期凈利潤(rùn)(元)', '公告日期'],
stockTable: []
}
}
stockTable數(shù)據(jù)結(jié)構(gòu)：
[
[
"1",
"000016",
"深康佳A",
"業(yè)績(jī)大幅上升",
"凈利潤(rùn)79000萬元至99000萬元,增長(zhǎng)幅度為65.40%至107.27%",
"107.27",
"4.78億",
"2022-01-25"
],
[
"2",
"000025",
"特力A",
"業(yè)績(jī)大幅上升",
"凈利潤(rùn)12700萬元至13300萬元,增長(zhǎng)幅度為120.26%至130.66%",
"130.66",
"5766.38萬",
"2022-01-25"
],
[
"3",
"000037",
"深南電A",
"業(yè)績(jī)預(yù)虧",
"凈利潤(rùn)-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數(shù)組中的元素 -->
<template slot-scope="scope">
<span>{{ scope.row[position] }}</span>
</template>
</el-table-column>
</el-table>
文字超出長(zhǎng)度限制末尾加省略號(hào)
.text-flow-ellipsis-multiple {
/* 多余內(nèi)容省略號(hào)處理-多行 */
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.text-flow-ellipsis-single {
/* 多余內(nèi)容省略號(hào)處理-單行 */
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.text-ellipsis-end {
/* 多余內(nèi)容省略號(hào)處理-單行 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
其它問題
1.元素設(shè)置成寬度100%参滴，不能設(shè)置margin或padding值，否則會(huì)把視圖撐到屏幕外
2.flex 設(shè)置flex-wrap：nowarp 寬度必須設(shè)置100% 否則子元素會(huì)一直撐著寬度锻弓，不會(huì)縮放
3.flex中如果某個(gè)元素felt-grow:1砾赔，導(dǎo)致未設(shè)置felt-grow寬度或高度被擠小的情況，請(qǐng)?jiān)O(shè)置最小寬度或最小高度
