代码cr总结
1. 前端开发过程中，有的样式没法生成，加入/deep后样式成功渲染，为什么，用这个deep有什么注意点嘛
在前端开发中，如果你发现某些样式没有被正确应用，并且使用了 /deep/ 或 ::v-deep (视具体框架而定) 后样式成功渲染，这通常是因为你遇到了 CSS 作用域问题，特别是在使用 Vue.js 或类似的现代前端框架时。
为什么 /deep/ 或 ::v-deep 能解决问题：
-
作用域隔离： 在使用如 Vue.js 这样的框架时，组件的 CSS 默认是作用域化的。这意味着样式只应用于当前组件，避免与其他组件的样式冲突。
-
穿透作用域：
/deep/或::v-deep允许你的样式“穿透”这个作用域边界，影响到子组件内部的元素。这对于覆盖子组件的默认样式非常有用。
使用 /deep/ 或 ::v-deep 的注意点：
-
过度使用问题： 过度使用
/deep/可能会导致样式管理变得复杂，尤其是在大型项目中。它破坏了组件样式的封装性，可能会引入意外的样式覆盖和冲突。 -
样式泄漏： 使用
/deep/时，你的样式可能会影响到不期望影响的子组件，尤其是在嵌套组件的情况下。 -
维护性： 修改穿透样式可能会影响多个组件，这可能导致维护上的困难，尤其是在不清楚哪些组件受到了影响的情况下。
-
框架兼容性：
/deep/,::v-deep, 或其他类似的选择器，它们的支持取决于你使用的具体框架和版本。一些框架可能有自己的实现方式或者不支持这类选择器。 -
性能考虑： 在某些情况下，使用
/deep/可能会对性能产生一定影响，尤其是在大型应用中，因为它可能会增加浏览器计算和渲染样式的负担。
结论：
/deep/ 或 ::v-deep 是强大的工具，可以帮助你管理和覆盖组件内部的样式。但应谨慎使用，确保你的样式代码仍然可维护和清晰。在可能的情况下，尽量避免使用它们，以保持样式的封装和组件的独立性。
2. 动态属性
:class="['custom-form-item', {'margin-left-vendor': visibility.vendor, 'margin-left-city': visibility.city }]"
3. 代码优化
四选一用这个写法
} else {
const targetSelection = Object.values(this.search).find( v => v && v.length);
this.startReportDate = targetSelection[0].replace(/-/g, "");
this.endReportDate = targetSelection[1].replace(/-/g, "");
}
// else if (this.search.weekSelection && this.search.weekSelection.length > 0) {
// this.startReportDate = this.search.weekSelection[0].replace(/-/g, '');
// this.endReportDate = this.search.weekSelection[1].replace(/-/g, '');
// } else if (this.search.monthSelection && this.search.monthSelection.length > 0) {
// this.startReportDate = this.search.monthSelection[0].replace(/-/g, '');
// this.endReportDate = this.search.monthSelection[1].replace(/-/g, '');
// } else if (this.search.quarterSelection && this.search.quarterSelection.length > 0) {
// this.startReportDate = this.search.quarterSelection[0].replace(/-/g, '');
// this.endReportDate = this.search.quarterSelection[1].replace(/-/g, '');
// } else if (this.search.yearSelection && this.search.yearSelection.length > 0) {
// this.startReportDate = this.search.yearSelection[0].replace(/-/g, '');
// this.endReportDate = this.search.yearSelection[1].replace(/-/g, '');
// }
