记开发中遇到的‘八阿哥’

在日常开发中经常会遇到各种问题，我是个懒人，之前都是解决完习惯性记录在办公软件的个人聊天记录里，时间久了再遇到类似问题可能都找不到以往的解决方案，为了更高效的"偷懒"，决定记录在掘金上，这样找起来就方便多了^_^

1、表格渲染异常时可以考虑先隐藏表格，等数据回来再渲染

 this.projectList = 接口返回数据
 // 表格通过v-if设置了显示隐藏，当前先隐藏表格
 this.showTable = false;
 // 在DOM更新后显示表格
 this.$nextTick(() => {
    this.showTable = true;
 });

2、列表批量赋值时不要使用数组下标的方式，因为一旦需求变动需要注释一些选项的时候就容易出现问题，最好的方式是每个选项设置唯一key，通过对象key取值的方式赋值

mydealArr: [
{
title: 'WBS',
imgPath: require('/assets/projectHome/projectHomeWBS@3x.png'),
key: 'myTodoWBS', // 设置唯一key
value: '',
name: 'WbsManageTask'
},
{
title: '风险',
imgPath: require('/assets/projectHome/risk@3x.png'),
key: 'myTodoRisk', // 设置唯一key
value: '',
name: 'RiskMaintain'
},
{
title: '问题',
imgPath: require('/assets/projectHome/question@3x.png'),
key: 'myTodoProblem', // 设置唯一key
value: '',
name: 'RiskMaintain'
}
]
// data是接口获取到的数据对象，使用对象通过key获取值的方式给列表赋值
this.mydealArr.forEach((item) => {
item.value = data[item.key] ?? 0;
});

3、代码需要替换覆盖的时候尽量不要全篇覆盖，这样可能会因为细微差异导致覆盖后丢失旧代码的一些功能

4、表格里下拉选项被遮挡时可以设置popper-append-to-body为false来解决

5、内部的通用组件如果功能出现异常要考虑是否是组件库版本太低的问题，通常通过升级组件库版本即可解决

6、表格固定列按钮被遮挡时可以设置height为100%高优先级覆盖内联样式来解决

.el-table__fixed,.el-table__fixed-right {
      height: 100% !important; // 覆盖内联样式
    }

后续有时间还会继续更新开发中遇到的问题的，特此记录一下~