24年2月-3月工作笔记整理（前端）

一、项目优化

优化项目启动时间思路：删除冗余的代码文件、卸载不用的依赖、修改webpack配置、忽略不常用源码文件检查

二、业务需求方法

1.选择面板设置特殊时间样式逻辑

 <el-form-item
              label="播种时间"
              prop="sowingTime"
              v-if="riceForm.type === '1'"
            >
              <el-date-picker
                @focus="focusChange"
                v-model="riceForm.sowingTime"
                type="date"
                placeholder="请选择播种时间"
                class="input"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                popper-class="picker-popper"
              >
              </el-date-picker>
            </el-form-item>

 this.pickerOptions = {
        cellClassName: time => {
          if (this.sowingRecommendDate.length > 0) {
            if (
              this.sowingRecommendDate.includes(
                this.$dayjs(time).format('YYYY-MM-DD')
              )
            ) {
              return 'recommend'
            } else {
              return 'norecommend'
            }
          } else {
            return 'recommend'
          }
        }
      }

<style lang="scss">
.picker-popper .el-date-table .recommend {
  color: #333;
}
.picker-popper .el-date-table .norecommend {
  color: #c0c4cc;
}
</style>

2.箭头函数的特点，如果有花括号包住的话，需要return，如果是简写没有花括号，可以不需要return，两种不能混合用。

let obj = this.fertilizerKindList.find(item => {  
    return item.fertilizerId === this.curFertilizerId;  
});
let obj = this.fertilizerKindList.find(item => item.fertilizerId === this.curFertilizerId);

3.联级组件中调用懒加载方法更新面板数据

ref='plantCascader'
 this.$refs.plantCascader.panel.lazyLoad()

工作做得越来越杂，业务也很多，很难有时间去深入研究其原理，得继续努力了。