近期项目总结

1、使用flex布局的时候不要只是简简单单的“flex：1”，最好是把每个子模块的长宽都设置一下，要不然后期会改样式改到吐。

  // 错误例子
  .error {
    flex: 1;
  }
  // 正确例子
  .true {
    width: 100%;
    height: 100%;
  }

2、如果发现设置的样式导致网页出现了滚动条，在找到“罪魁祸首”之后不妨使用“position：realtive”以及“position：absolute”呢？比如下图：

 

 

 ps：“.BackTable”是子组件中的样式，并不是<BackTable/>

3、关于element table组件的使用（view应该也适用）：

设置最大高度使其在数据多的时候可以通过滚动条浏览数据：

首先上图所示，先用样式将其定位好，然后

  mounted() {
    this.$nextTick(() => {
      this.getHeight();
    });
  },
method:{
  // 表格高度自适应,这里直接将最大高度设置为其外部包围的高度
    getHeight() {
      this.tableConfig.height =
        this.$refs.Orientation.$el.offsetParent.offsetHeight;
    },
},
  // 窗体大小变化就执行getHeight方法即可
  created() {
    window.addEventListener("resize", this.getHeight);
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },

记得先设置好“ref”属性，当然个人认为保证样式成功最关键的部分还是position属性的设置，当然这里是不使用分页器的情况，table组件最好还是和分页器组合使用

4、echarts图表属性

axisLine: {
            onZero: false, //使x轴轴线不在0上
            show: true,
          },

当你的echarts 数据多是负数而你又想将x轴保持在最下边的时候，可以使用这个属性，但是使用的时候要注意 只有在另一个轴为数值轴且包含 0 刻度时有效。

5、多看echarts文档，许多变种echarts图表都可以通过修改配置项来实现

6、不要局限与每个echarts图表中只存在一个type，两两结合反而会产生不错的效果，比如说使用仪表盘+饼图实现指南针效果

7、box-sizing: border-box;  解决由于设置margin或者padding导致的溢出问题

 

ps：新手理解，若有误，请各位大佬指点，Thanks♪(･ω･)ﾉ