vue文件互相引用、::v-deep样式覆盖、el-table展示多结构数据

公司要求学习前端，好嘛，一边拿钱一边学技术，痛并快乐着，记录一下遇到的问题。

1. vue文件相互引用
   将app.vue文件作为主组件（项目入口），想要引入自己写的东西（另一个vue文件），需要使用import关键字，不过文件路径刚开始我是用的是./和…/都不行，使用@就可以了（@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径）
   
2. svg与我所想的img不一样，使用传统的<img src= >方式有问题，百度了好久，发现直接把svg源码直接贴进来就行了，也可以对其样式进行修改
   
3. 我做的是一个统计表，数据多需要分页，分页组件用element-ui来开发的。element-ui功能很强大，单分页一个组件就提供了很多样式，也可以在其基础上进行修改来达到自己想要的。
   我选择的这款：
   

• 觉得显示的页数太多怎么办？
• 想把每页显示条数重新设置或者放在右边怎么办？
• …
  element-ui每个组件都有属性说明，配合着百度一般都是可以弄出自己想要的效果，具体不详述了。
  这里有个小插曲，我在页面上想添加总条数这个数据，但是不想和分页插件放在一起，我想单独放在最左边。（我的做法是再放一个分页组件，layout属性里只放total这个值…hhh这里只是提供一个思路）效果是这样的：
  

4. 上图中如果我想把这个分页按钮的颜色从蓝色换成其他色该怎么办呢，看了一下分页组件的属性介绍貌似无法实现，这时可以使用::v-deep来实现
   ::v-deep vue样式穿透 当我们需要覆盖element-ui中的样式时只能通过深度作用选择器
   其实有两种写法：第一种/deep/ 第二种::v-deep 但是第一种我用了不行，很困惑，用了第二种，具体使用方法就是页面打开元素，查询元素的具体位置，写在前面就行
   

5. 表格展示多维度数据
   el-table最简单的展示数据，就是通过prop

<el-table-column
     prop="status"
     label="状态"
     min-width="5%">
</el-table-column>

[{
        abnormalPhenomena: {
          pictureUrl: '@/assets/icon/outline/48/1.网络.png',
          what: '响应成功率突降异常',
          level: '一般',
          type: '设备级'
        },
        reasonAnalyse: ['① 用户欠费;用户名错误;密码错误；', '② 与IPA连接异常;与IPA连接正常，但IPA存在问题'],
        coverage: {areaNum: 3, equipmentNum: 4},
        status: '待处理',
        handleSuggestion: ['① 检查系统认证代理日志', '② 检查AAA'],
        time: ['2021-01-02 16:00:00', '2021-01-02 17:05:00', '1时5分0秒']
      }, {
        abnormalPhenomena: {
          pictureUrl: '@/assets/icon/outline/48/1.网络.png',
          what: '响应成功率突降异常',
          level: '一般',
          type: '设备级'
        },
        reasonAnalyse: ['① 用户欠费;用户名错误;密码错误；', '② 与IPA连接异常;与IPA连接正常，但IPA存在问题'],
        coverage: 'XXXXX',
        status: '待处理',
        handleSuggestion: ['① 检查系统认证代理日志', '② 检查AAA'],
        time: ['2021-01-02 16:00:00', '2021-01-02 17:05:00', '1时5分0秒']
}]

那像上面的abnormalPhenomena与reasonAnalyse这种属性的可以用到 template slot-scope=“scope” 来实现。

1、
<template slot-scope="scope">
     <div class="abnormalPic">
           <img src="@/assets/icon/outline/48/1.网络.png" alt="" style="width: 40px;height: 40px"/>
     </div>
     <div class="abnormalText">
           <div class="what">{{ scope.row.abnormalPhenomena.what }}</div>
           <div class="level">{{ scope.row.abnormalPhenomena.level }}</div>
           <div class="type">{{ scope.row.abnormalPhenomena.type }}</div>
     </div>
</template>
2、
<template slot-scope="scope">
     <div v-for="(item,index) in scope.row.reasonAnalyse" :key="index">
           {{ item }}
     </div>
</template>

写法大致是这样的，scope是table内部基于tableData生成出来的，scope可以读到这一行的数据。