vue+elementui实现表头根据后台数据动态生成字段

最新推荐文章于 2025-06-16 16:38:00 发布

The ever Boy

最新推荐文章于 2025-06-16 16:38:00 发布

阅读量2.5w

点赞数 4

本文介绍了一种使用Vue.js框架实现表格头部动态生成的方法。通过后台提供表头字段数据，并利用v-for指令循环遍历这些数据来动态创建表头。此外，还展示了如何根据不同类型的列展示不同的内容，例如普通列和可排序列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思想：需要后台提供表头字段数据，然后循环该数组实现表头动态生成

<template>
    <div>
        <el-table class="tb-edit" highlight-current-row :data="tableData" style="width: 100%">

            <template v-for="(col ,index) in cols">
                <el-table-column v-if="col.type==='normal'" :prop="col.prop" :label="col.label"></el-table-column>
                <el-table-column v-if="col.type==='sort'" :prop="col.prop" sortable :label="col.label">
                    <template scope="scope">
                        <el-tag type="primary">{{ scope.row.type }}</el-tag>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <br>数据:{{tableData}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            cols: [
                { label: "节点编号", prop: "node", type: "normal" },
                { label: "名称", prop: "name", type: "normal" },
                { label: "类型", prop: "type", type: "sort" },
                { label: "坐标", prop: "coordinate", type: "normal" }
            ],
            tableData: [
                {
                    node: "0051",
                    name: " 机库顶",
                    type: "UWB",
                    status: "正常",
                    coordinate: "12.21,34.45,34.6"
                },
                {
                    node: "0061",
                    name: "机库门",
                    type: "GPS",
                    status: "低电",
                    coordinate: "45.41,67.45,78.6"
                }
            ]
        };
    },
    methods: {
        handleCurrentChange(row, event, column) {
            console.log(row, event, column, event.currentTarget);
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        }
    }
};
</script>

<style>
.tb-edit .el-input {
    display: none;
}

.tb-edit .current-row .el-input {
    display: block;
}

.tb-edit .current-row .el-input + span {
    display: none;
}
</style>