el-table 自定义列、自定义数据

一、对象数组格式自定义拆分为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;
});