一、對象數組格式自定義拆分為N列

1-1、數據格式：

 const arrayList = ref([{"RACK_NO": "A-1-001"},{"RACK_NO": "A-1-002"},{ "RACK_NO": "A-1-003"},//省略多個{"RACK_NO": "A-1-100"}
])

1-2、自定義為3列： 數據 | 操作 | 數據 | 操作?| 數據 | 操作?

1-3、代碼

<template><div><el-table :data="tableList" border ref="table" :cell-style="{ 'text-align':             'center' }" :header-cell-style="{background: '#5f697d',color: '#fff',height: '10px','text-align': 'center'}" stripe v-loading="loading"><!-- 動態生成列 --><template v-for="(column, index) in columns" :key="index"><el-table-column :label="column.label" :width="column.width"><template #default="{ row }"><div v-if="column.type === 'number'" class="rack_style">{{ row[column.index]?.RACK_NO }}</div><el-button v-else-if="column.type === 'action'" type="primary"v-if="row[column.index]?.RACK_NO">{{ row[column.index]?.RACK_NO }}</el-button></template></el-table-column></template></el-table></div>
</templete><script setup>const columns = ref([{ label: '編號', type: 'number', index: 0, width: '150' },{ label: '操作', type: 'action', index: 0 },{ label: '編號', type: 'number', index: 1, width: '150' },{ label: '操作', type: 'action', index: 1 },{ label: '編號', type: 'number', index: 2, width: '150' },{ label: '操作', type: 'action', index: 2 }]);</script>

<script setup>
import { ref, onMounted } from 'vue'const RACK_NO_LIST = ref([])  // 得到的數據
const tableList = ref([])  // 處理后的數據// 截取處理數據
const chunkArray = (arr, size) => {const result = [];for (let i = 0; i < arr.length; i += size) {result.push(arr.slice(i, i + size));}return result;
}const getOneDetail = async (val) => {loading.value = truetry {userService.getTableList(val).then(res => {if (res.code === 200) {RACK_NO_LIST.value = res.data.RACK_NO_LISTtableData.value = chunkArray(RACK_NO_LIST.value, 3);} else {toast(res.msg, 'error');}})} finally {loading.value = false}
}onMounted(() => {const urlParams = new URLSearchParams(window.location.search)currentRackCode.value = urlParams.get('code')?.toString() || ''if (currentRackCode.value) {getOneDetail(currentRackCode.value)}
})

二、自定義表頭、列、數據

2-1、 數據格式：

const data = ref({"類型1": [{"WT": "1.0", "MNY": "1.00", "WT_NM": "kg", "GRADE_NO": "1"}], "類型2" : [{ "WT": "2.0", "MNY": "3.00", "WT_NM": "kg", "GRADE_NO": "1" }],"類型3" : [{ "WT": "2.0", "MNY": "3.00", "WT_NM": "kg", "GRADE_NO": "2" }]
})

2-2、需要的樣式

?2-3、代碼

<template><div><el-table :data="tableListShow" border ref="table":cell-style="{ 'text-align': 'center' }" :header-cell-style="{background: '#5f697d',color: '#fff',height: '10px','text-align': 'center'}" stripe v-loading="loading"><el-table-column v-for="(column, index) in tableColumns" :key="index"         :label="column.label":prop="column.prop"><template #default="scope">{{ scope.row[column.prop] }}</template></el-table-column></el-table></div>
</template>
<script setup>const tableList = ref([]) // 返回的數據
const tableListShow = ref([])  // 表格實際顯示的數據onMounted(() => {tableList.value = {"類型1": [{"WT": "1.0", "MNY": "1.00", "WT_NM": "kg"}], "類型2" : [{ "WT": "2.0", "MNY": "3.00", "WT_NM": "kg"}],"類型3" : [{ "WT": "2.0", "MNY": "3.00", "WT_NM": "kg"}]}
});// 自定義表頭
const tableColumns = computed(() => {const columns = [];for (const key in tableList.value) {const firstItem = tableList.value[key][0];if (firstItem) {const gradeNoLabel = key  // 類型1 類型2 類型3columns.push({ label: '重量', prop: `${key}_WT_WTNM` });columns.push({ label: gradeNoLabel , prop: `${key}_MNY` });}}return columns;
});// 處理顯示的數據
const tableListShow = computed(() => {const result = [];let maxLength = 0;for (const key in tableList.value) {maxLength = Math.max(maxLength, tableList.value[key].length);}for (let i = 0; i < maxLength; i++) {const row = {};for (const key in tableList.value) {const item = tableList.value[key][i];if (item) {row[`${key}_WT_WTNM`] = `${item.WT} ${item.WT_NM}`;row[`${key}_MNY`] = `￦${fitem.MNY}`;} else {row[`${key}_WT_WTNM`] = "-";row[`${key}_MNY`] = "-";}}result.push(row);}return result;
});