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

一、对象数组格式自定义拆分为N列

1-1、数据格式:

javascript 复制代码
 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、代码

javascript 复制代码
<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>
javascript 复制代码
<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、 数据格式:

javascript 复制代码
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、代码

javascript 复制代码
<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;
});
相关推荐
IT_陈寒15 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用17 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥33 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端