createmodel-web/src/modules/createmodel/components/DetailTable.vue

<template>
    <el-dialog 
        :append-to-body="true" 
        :title="currentFileName"  
        width="80%"
        :visible.sync="isDetailCon"
        @open="onOpen"
        :show-close="true" >
            <el-table :data="fileContent.result" size="mini" 
                :height="tableHeight" tooltip-effect="dark" ref="fileTable" :key="currentFileName + '2'" 
                highlight-current-row style="width: 100%">
                <template v-for="(key, value) in fileContent.header">
                    <el-table-column 
                        :prop="value" 
                        :label="key" 
                        :min-width="150" 
                        :show-overflow-tooltip="true" 
                        :key="value">
                    </el-table-column> 
                </template>
            </el-table>
            <pagination :dataList="fileContent" :upParam="beforePayload" @loadMethod="loadTableDataById"></pagination>
    </el-dialog>
</template>

<script>
import pagination from "@/components/Pagination.vue";
import dTable from "@/components/DragTable.vue";
export default {
    components: {
        pagination,
        dTable
    },
    data() {
        return {
            sortable: "",
            beforePayload: {
                page: 1,
                pageSize: 20
            },
            currentFileName: "",

            tableHeader: [],
            tableData: []
        };
    },
    computed: {
        fileContent: {
            get() {
                return this.$store.getters.getFileContentById;
            }
        },
        isDetailCon: {
            get() {
                return this.$store.getters.getIsDetailTable;
            },
            set(val) {
                this.$store.commit("is_detail_table_con", false);
            }
        }
    },
    created() {
        this.tableHeight = this.getTableHeight(400);
    },
    mounted() {},
    methods: {
        alertMsg() {
            console.log("just for test drag");
        },
        onOpen() {
            let fileObj = this.$store.getters.getCurrentFile;
            let payload = {
                page: 1,
                pageSize: 20,
                fileId: fileObj.id
            };
            this.currentFileName = fileObj.filename;
            this.loadTableDataById(payload);
        },
        loadTableDataById(payload) {
            const loading = this.$loading({
                lock: true,
                text: "请耐心等待，正在加载数据。。",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
            let fileObj = this.$store.getters.getCurrentFile;
            payload.fileId = fileObj.id;
            this.beforePayload = payload;
            this.$store
                .dispatch("view_file_content_by_id", this.setModelId(payload))
                .then(data => {
                    loading.close();
                    if (data.code == 200) {
                        this.$store.commit("set_file_content_by_id", data);
                    } else {
                        this.$message({
                            type: "error",
                            message: data.message ? data.message : "加载失败"
                        });
                    }
                });
        }
    }
};
</script>