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 = true
    try {
           userService.getTableList(val).then(res => {
            if (res.code === 200) {
                RACK_NO_LIST.value = res.data.RACK_NO_LIST
                tableData.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 类型3
            columns.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;
});