vue element-ui 实现表格列表动态展示

思路：
把列名都放在columns这个数组中，动态改变这个数组的内容，就能实现动态展示列的目的，代码如下：

<el-table style="padding-top: 10px;" ref="multipleTable" tooltip-effect="dark" :data="gridData">
    <el-table-column v-for="col in columns" :prop="col.value" :label="col.label" :key="col.key"></el-table-column> 
</el-table>

columns数组包含的内容格式如下：

// 字段header
this.columns.push({
    label: 实际的字段名，比如id,
    value:  实际的字段名，比如id,
    key: Date.now()
});

代码全部如下：

<template>
    <el-dialog title="线上数据样本" @open="openDialog()" :visible.sync="visible" :before-close="handleClose" center>
        
        <el-table style="padding-top: 10px;" tooltip-effect="dark" :data="gridData">
            <el-table-column v-for="col in columns" :prop="col.value" :label="col.label" :key="col.key"></el-table-column> 
        </el-table>
        
        <span slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="cancelModal()">关 闭</el-button>
        </span>
        
    </el-dialog>
</template>

<script>
    // 获取样本数据的请求
    import {
        getSampleDataUrl
    } from '@/api/task/tasklist';

    export default {
        name: 'showDataSample',
        props: ['visible'],// 父组件传来的可变量，用户控制 el-dialog的显示于隐藏
        data() {
            return {
                columns: [],// 列名，如 id,name
                gridData: [] // 结果,  如 1001，张三
            };
        },
        created() {
            console.log("in showDataSample ");
        },

        methods: {
            cancelModal() {
                // 关闭弹窗，触发父组件修改visible值，关闭 el-dialog控件
                this.$emit('update:visible', false)
            },
            // 获取数据
            getSampleData(dsId,tableName, columnList, headerList) {
                this.columns = headerList;
                console.log("dsId=" + dsId + ",tableName = " + tableName + ",columnList = " + JSON.stringify(columnList))
                const data = getSampleDataUrl({
                    dsId: dsId,
                    tableName: tableName,
                    columnList: JSON.stringify(columnList)
                });
                data.then(res => {
                    if (res.success) {
                        var data = res.data;
                        data.forEach(item => {
                            console.log(item)
                        })
                        this.gridData = res.data;
                        
                    } else {
                        this.$alert('获取数据源列表失败', '提示', {
                            confirmButtonText: '关闭'
                        })
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            openDialog() {
                // 打开数据源DIV
                console.log('openDialog');
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.cancelModal();
                    })
                    .catch(_ => {});
            },
        }
    };
</script>

<style>
</style>