前端开发中问题记录新增当前节点的子节点：需要判断当前节点是否懒加载展开，如果当前节点展开，则更新当前节点的数据；若没有

1、el-tabs 和 table 一起使用（每个tabs里面都有table，表格抬头一样，只是数据不一样）ie上会闪烁
解决办法：
（网上说使用v-if的，不起作用）把el-tabs里面的table提取出来，合用一个

2、ie上el-drawer 中第一个input输入框会自动获取焦点且获取的焦点在输入框最左侧 原因：数据渲染在获取光标之前，
解决办法：获取数据改成异步，写个时间为0的定时器

3、el-drawer关闭会闪一下、el-drawer打开左右晃动
原因：动画造成定位不准
解决办法：去掉动画（修复动画造成的定位问题比较难，没找到解决办法）

 /*解决ie晃动问题*/
  .el-drawer__open .el-drawer.rtl{
    -webkit-animation:none;
    animation: none;
  }
  .el-drawer.rtl{
    -webkit-animation:none;
    animation: none;
  }

4、el-table表格最右侧一列固定住偶尔会出现遮盖
解决办法：

.m-table{
  /deep/ .el-table__fixed, 
  /deep/ .el-table__fixed-right{
    height: 100% !important;
  }
}

5、过滤特殊字符正则

const reg = /[^a-zA-Z0-9\r\n\u4E00-\u9FA5?,，.。()（）：:、!\\！“”""《》@【】？&\\[\] ${}//=;；]/g;

6、避免/deep/ 过度使用（叠加，有的地方多余），ie上样式会不起作用

7、el-table 展示树形结构懒加载新增、编辑、删除表格不更新问题

新增根节点：只需要getList()
新增当前节点的子节点：需要判断当前节点是否懒加载展开，如果当前节点展开，则更新当前节点的数据；若没有，则更新当前节点的父节点（若当前节点就是根节点，则getList()）。那怎么判断当前节点是否懒加载展开过，在load方法里面有记录set 过 paramId，所以只需要判断maps里面是否有paramsId即可。
删除节点：更新父节点，父节点没有，getList()
编辑节点：更新父节点，父节点没有，getList()

data(){
  return {
    maps: new Map(),
    ...
  }
},
methods:{
  getList() {
    const listParams = {
      interId: this.interId,
      upParamId: '',
    };
    API.request1(listParams).then((res: any) => {
      if (res.success) {
        this.tableData = res.data;
      }
    });
  },
  load(tree:any, treeNode: any, resolve:any) {
    const { paramId } = tree;
    this.maps.set(paramId, { tree, treeNode, resolve });
    const listParams = {
      interId: this.interId,
      upParamId: paramId,
    };
    API.request1(listParams).then((res: any) => {
      if (res.success) {
        resolve(res.data);
      }
    });
  },
  handleDelete(row: any) {
    API.inter.paramDelete.request({ paramId: row.paramId }).then((res: any) => {
        if (res.success) {
          ...
          this.handleUpCallback(row);
        }
      });
  },
  handleCallback(infoData: any) {
      const v = infoData.info;

      // 如果是编辑更新，更新父节点
      if (infoData.isUpdate) {
        this.handleUpCallback(v);
        return;
      }


      if (!v) { // 如果是根节点新增
        this.getList();
      } else if (this.maps.get(v.paramId)) { // 判断当前新增节点是否展开，展开就更新当前节点，否则更新父节点,若父节点没有，则getList
        const { tree, treeNode, resolve } = this.maps.get(v.paramId);
        this.$set((this.$refs.table as any).store.states.lazyTreeNodeMap, v.paramId, []);
        this.load(tree, treeNode, resolve);
      } else if (this.maps.get(v.upParamId)) {
        const { tree, treeNode, resolve } = this.maps.get(v.upParamId);
        this.$set((this.$refs.table as any).store.states.lazyTreeNodeMap, v.upParamId, []);
        this.load(tree, treeNode, resolve);
      } else {
        this.getList();
      }
    },
    handleUpCallback(v: any) {
      if (v && this.maps.get(v.upParamId)) {
         const { tree, treeNode, resolve } = this.maps.get(v.upParamId);
        this.$set((this.$refs.table as any).store.states.lazyTreeNodeMap, v.upParamId, []);
        this.load(tree, treeNode, resolve);
      } else {
        this.getList();
      }
    },
  ...
}

8、chrome浏览器接口不携带cookie，firefox、ie都是好的
前提：客户端直接调用后端接口
原因：初步怀疑是浏览器版本的问题，网上有说axios里面withCredentials 设置为true，然后浏览器配置里修改什么参数的（不太适用）
解决办法：本地做了代理

9、element-ui el-table checkbox 按条件是否禁用

...

<el-table-column type="selection" :selectable="handleSelectable" width="55"></el-table-column>

...

handleSelectable(row){
  if(row.status){ // 可选
    return true
  }
  // 禁用
  return false  
}
...

10、npm包下载报错

//强制清除缓存
npm cache clean --force

强制清除缓存还不行的话可以把本地的package-lock.json删除掉，有时候会遇到全量安装的时候里面某个包安装找不到、安装失败，可以先单独把这个包安装再全量安装（怀疑其他包依赖这个包但又在这个包之前下载）