开发笔记07

透传

.borderNone /deep/ .el-input__inner {
  border: none; 
}

::v-deep .el-table__cell {
  padding: 0;
}

::v-deep .cell {
  padding-left: 0;
  padding-right: 0;
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 0;
}

动态的为元素添加穿透样式

echarts图根据搜索刷新数据

表格要有一整行这样的

在vue的template给对象增加的属性，也是响应式的，但是在script的data属性之外增加，这个就不是响应式了。如果想在data之外增加的属性（例如在methods中增加）变成响应式，那么要使用this.$set

通过设置min-height来达到超出100vh的高度的部分的背景颜色一致

watch监视对象的某一个属性

watch: {
  "row.crew_running_hour_1": function (newVal, oldVal) {
    this.row.ave_evaporation_1 = (
      this.row.total_evaporation_1 / newVal
    ).toFixed(4);
  },
  "row.crew_running_hour_2": function (newVal, oldVal) {
    this.row.ave_evaporation_2 = (
      this.row.total_evaporation_2 / newVal
    ).toFixed(4);
  },
},

echarts反转x轴

echarts配置x轴在上面展示

xAxis: [
  {
    type: "category",
    data: [
      "传动链",
      "发电机",
      // "机舱&塔筒",
      // "液压&润滑",
      // "变压器&变频器",
      "机舱",
      "液压",
      "变压器",
      "偏航",
      "变桨",
    ],
    axisTick: {
      show: false,
      alignWithLabel: true,
    },
    axisLabel: {
      show: true,
      color: "#fff",
    },
  },
  {
    type: "category",
    inverse: true, // x轴出现在天上
    axisTick: "none",
    axisLine: "none",
    show: true,
    axisLabel: {
      textStyle: {
        color: "#ffffff",
        fontSize: "12",
        textAlign: "right",
      },
      // formatter: function (value) {
      //   return value + " 万kWh";
      // },
    },
    data: this.chartData,
  },
],

el-input的change事件为什么会在第一次选中时触发？

当引用第三方组件时，第三方组件无法监听参数变化来重新渲染组件

get请求是将参数拼接到路径后面

append-to-body会固定父盒子高度，这样，在后面为arr增加对象，会出现数据增加，但是页面没有增加

递归子循环也要写终止条件

function recursionFn(reItem) {
  console.log(reItem.menuId)
  if (reItem.menuId === 'c') {
    return true;
  }

  if (reItem.children) {
    for (let i = 0; i < reItem.children.length; i++) {
      if (recursionFn(reItem.children[i])) {
        return true; // 如果找到符合条件的节点，立即返回true并终止递归
      }

      // recursionFn(reItem.children[i])
      // 这样会输出1到13，并不会终止
    }
  }

  return false; // 如果当前节点及其子节点都不满足条件，返回false
}

let data = {
  menuId: 1,
  children: [
    {
      menuId: 2,
      children: [
        {
          menuId: 3,
          children: [
            {
              menuId: 4,
              children: [
                {
                  menuId: 5, children: [
                    {
                      menuId: 'd',
                      children: [
                        { menuId: 'b' },
                        { menuId: 'c' }
                      ]
                    }]
                },
                { menuId: 6 }
              ]
            },
            {
              menuId: 7,
              children: [
                { menuId: 8 },
                { menuId: 9 }
              ]
            }
          ]
        },
        { menuId: 10 }
      ]
    },
    {
      menuId: 11,
      children: [
        { menuId: 12 },
        { menuId: 13 }
      ]
    }
  ]
}

recursionFn(data)

这两种写法存在一些区别：

1. if (recursionFn(reItem.children[i])) { return true; }

这种写法会在调用递归函数后立即判断递归函数的返回值，如果返回true，则立即返回true并终止当前递归分支的继续执行，这样可以实现在满足条件时立即终止递归。

2. recursionFn(reItem.children[i]);

这种写法仅仅是调用递归函数，并不对递归函数的返回值做任何判断和处理，即使递归函数返回true，也不会立即终止当前递归分支的继续执行，而是会继续执行后续的代码。

因为recursionFn()返回的true只是这个函数的返回结果，并不能看作是循环的终止。