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;
}