Vue初探踩坑

项目使用了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宽度或高度被挤小的情况,请设置最小宽度或最小高度
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容