vxe-table实现动态列

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

1.动态列解释

正常列表是有固定的列；我的需求是，最初只知道表格的固定两列，查询数据时候，后端会返回对应的动态列表头businessStationList和列表数据businessApplyInfoList

2.解决步骤

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

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

javascript 复制代码

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