做网站知名公司,智能建设网站,织梦企业门户网站,中信建设有限责任公司 闫励处理后效果 后端返回弹窗的列数据
后端返回的页面列数据 在正常情况下两者如果在组件中共用同一个key的话#xff0c;会导致所有的表格中列名#xff0c;都会是一样的(最后一次请求返回的列)#xff0c;这样的话#xff0c;打开弹窗也会影响到页面中已经渲染好的列。
代…
处理后效果 后端返回弹窗的列数据
后端返回的页面列数据 在正常情况下两者如果在组件中共用同一个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,不是请求页面idproxy.$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}});
}
