Table表格数据处理
当后台不行，返回表格数据无结构，需要前端构造时，前端需要处理Table表格数据。
async handleSearch(all = false) { // all 为 true 请求头部 ，为 false 不请求
const {
query, query: { dataSourceCode, openStatus },
pagination, pagination: { current, pageSize },
} = this
// 表头
if (all) {
const dataHead = await api.dataSourceFieldList({ dataSourceCode, openStatus })
if ( Array.isArray(dataHead) && dataHead.length) {
this.columnsHead = []
this.columnsFoot = []
dataHead.forEach(item => {
// 头-columns
this.columnsHead.push({
...item,
width: 140,
ellipsis: true,
// title: Number(item.customStatus) ? '自定义字段' : '原始字段',
title: item.customStatusMsg,
customRender: () => <span>{ item.openStatusMsg }</span>,
})
// 脚-columns
this.columnsFoot.push({
width: 140,
ellipsis: true,
title: item.fieldName,
dataIndex: item.fieldId,
scopedSlots: { customRender: 'fieldValue' },
// customRender: (text) => {
// // console.log('错误的', text.error)
// if (text?.error) return <span style="color: red">{ text?.value ?? '-' }</span>
// return text?.value ?? '-'
// },
})
})
}
}
// 表体
const dataFoot = await api.dataSourceDetailList({ ...query, current, pageSize })
const { pageData, ...others } = dataFoot
this.pagination = {
...pagination,
...others,
size: String(others.size),
}
if (Array.isArray(pageData) && pageData.length) {
// 脚-table
this.tableFoot = pageData.map(item => {
let obj = {}
item.fieldList?.forEach(it => {
obj[it.fieldId] = {
value: it?.fieldValue ?? '-',
error: it?.abnormal ?? false,
}
})
this.columnsHead.forEach(item => {
if (!obj[item.fieldId]) {
obj[item.fieldId] = {
error: false,
value: '-',
}
}
})
return obj
})
} else {
// 不存在数据时，清空
this.tableFoot = []
}
},
-- GMD UI --
<gmd-table
:columns="columnsFoot"
:pagination="pagination"
:row-key="(record,index)=>index"
:data-source="tableFoot"
:scroll="{ x: 600, y: 500 }"
:border="true"
@change="pageChange"
>
<template #fieldValue="row">
<gmd-tooltip placement="topLeft">
<span slot="title">
{{ row.value }}
</span>
<span :style="{color: row.error ? 'red' : ''}">
{{ row.value }}
</span>
</gmd-tooltip>
</template>
</gmd-table>
