Vue:表格动态渲染列,出现多个表格的情况下（弹窗表格和页面显示表格处理）

处理后效果

后端返回弹窗的列数据

后端返回的页面列数据

在正常情况下两者如果在组件中共用同一个key的话，会导致所有的表格中列名，都会是一样的(最后一次请求返回的列)，这样的话，打开弹窗也会影响到页面中已经渲染好的列。

代码：table组件渲染代码

onMounted(() => {
//页面进入页面直接根据id请求， TableWindow 不存在就是页面
if(!props.PropTableS.TableWindow){
    tablekey()
  }
});



proxy.$bus.on('UpdataTablerowKeys',(butid:any)=>{
  if(props.PropTableS.TableWindow){
    //判断是否弹窗
    tablekey(butid)
  }
})
function tablekey(butid:string){
    //判断当前是否是弹窗调用，props.PropTableS.TableWindow 如果是：请求弹窗的id,不是请求页面id：proxy.$router.currentRoute.value.meta.id
    proxy.$axios.get('/system/user/list_fields', {
      permission_id: props.PropTableS.TableWindow ? butid :  proxy.$router.currentRoute.value.meta.id
    }).then((res) => {
      let keycopy = JSON.parse(JSON.stringify(TabKys));
      let list:any = {}
      // 提取 res.data 中的 code 属性，确保顺序
      res.data.forEach((item, index) => {
      TabKys[item.code] ={
          title: item.name,
          left_fixed: item.left_fixed == 1 ? true : false,
          fixed: item.left_fixed == 1 ? 'left' : false,
          id: item.id,
          sort: item.sort,
          status: item.status == 1 ? true : false,
          isshow: item.isshow || null,
          width: Object.keys(keycopy).length > 0 && keycopy[item.code]  != undefined ? keycopy[item.code].width: '120px',
          type: Object.keys(keycopy).length > 0 && keycopy[item.code]  != undefined ? keycopy[item.code].type:'text',
          permission_id: proxy.$router.currentRoute.value.meta.id
        } 
      //为什么会单独在新建一个对象存放数据，因为如果你在页面中定义了列的属性(宽度、类型....)在对象中就会在第一位置，那么在赋值Tkes的时候就会存在渲染位置就会跟后端返回的不一样。会根据你自定义列出现在code在第一位（本来在后端返回中是最后一位，但是你在自定义列中加了该列的属性，就会导致赋值的时候，自定义列的keyname 和 后端返回的code对得上。list就是完全采用后端返回的顺序。）
      list[item.code] ={
          title: item.name,
          left_fixed: item.left_fixed == 1 ? true : false,
          fixed: item.left_fixed == 1 ? 'left' : false,
          id: item.id,
          sort: item.sort,
          status: item.status == 1 ? true : false,
          isshow: item.isshow || null,
          width: Object.keys(keycopy).length > 0 && keycopy[item.code]  != undefined ? keycopy[item.code].width: '120px',
          type: Object.keys(keycopy).length > 0 && keycopy[item.code]  != undefined ? keycopy[item.code].type:'text',
          permission_id: proxy.$router.currentRoute.value.meta.id
        } 
      });
       //表格中右侧操作列 operate
      list.operate = TabKys.operate
      if(!props.PropTableS.TableWindow){
        DrawerObject.TabKys = JSON.parse(JSON.stringify(list))
        proxy.$router.options.routes[1].children.forEach(route=>{
          if(route.meta.id == proxy.$router.currentRoute.value.meta.id){
            route.meta.key = JSON.parse(JSON.stringify(list))
          }
        })
      }
        TabKys = JSON.parse(JSON.stringify(list))
        if(props.PropTableS.TableWindow){
            //弹窗刷新组件
          props.PropTableS.tablekeyindex++
        }else{
            //页面刷新组件
          tablekeyindex.value++
        }
    });
}