您的位置:首页 > 汽车 > 新车 > 公司职务名称大全_找能做网站的_seo排名官网_国内十大搜索引擎排名

公司职务名称大全_找能做网站的_seo排名官网_国内十大搜索引擎排名

2025/2/23 21:16:39 来源:https://blog.csdn.net/i_am_a_div/article/details/145780903  浏览:    关键词:公司职务名称大全_找能做网站的_seo排名官网_国内十大搜索引擎排名
公司职务名称大全_找能做网站的_seo排名官网_国内十大搜索引擎排名

vxe-table实现动态列

  • 1.动态列解释
  • 2.解决步骤
    • 2.1将后端返回的动态列表头,按照格式拼接在固定列表头上
    • 2.2将后端返回的列表数据按照键值对格式组装

1.动态列解释

正常列表是有固定的列;我的需求是,最初只知道表格的固定两列,查询数据时候,后端会返回对应的动态列表头businessStationList和列表数据businessApplyInfoList
在这里插入图片描述
在这里插入图片描述

2.解决步骤

2.1将后端返回的动态列表头,按照格式拼接在固定列表头上

2.2将后端返回的列表数据按照键值对格式组装

const tableSetting_business = ref({showOverflow: 'tooltip',height: '100%',columns: [],
}) // 配置式表格的基础配置// 固定的表头
let columns = ref([{ type: 'seq', field: 'seq_key', title: '序号', width: 50 },{ title: '网络名称', field: 'networkNameType', width: 180 },{ title: '网络地址', field: 'networkAddress' },// { title: '实时网关', field: 'aaaa3' },// { title: '非实时网关', field: 'aaaa4' },])// 获取列表
const getList = () => {getThreeList({...searchData.value,}).then(res => {businessStationList.value = res?.businessStationList || []  // 动态表头tableSetting_business.value.columns = columns.value || [] // 默认表头-避免每次拼接businessStationList.value.forEach(ele=>{ele.title = ele.stationName // 标题ele.field = ele.stationName // 唯一keyele.minWidth = 100 // 设置最小宽度})tableSetting_business.value.columns = tableSetting_business.value.columns.concat(businessStationList.value) // 合并表头tableData_business.value = res?.businessApplyInfoList || [] // 列表数据businessStationList.value.forEach(ele=>{tableData_business.value.forEach(item=>{ // 格式化数据let nowRow = item.businessStationList.find(item => item.stationName === ele.stationName) || {}item[ele.title] = nowRow?.stationValue})})})
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com