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 // 唯一key
ele.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
})
})
})
}