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})})})
}