金融网站建设成功案例营销咨询公司排名

处理后效果

后端返回弹窗的列数据

后端返回的页面列数据

在正常情况下两者如果在组件中共用同一个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.idproxy.$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} });//表格中右侧操作列 operatelist.operate = TabKys.operateif(!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++}});
}