基于Vue+element-ui 的Table二次封装

摘要：本人第一次写这个写的不好还望指出来作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员公司做的数据管理系统所以离不开表格了然后表格样式统一啥的就想到封装一个里面的了效果图表格组件的引入与使用监测数据表格

本人第一次写这个 写的不好还望指出来
作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 ！
公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了
效果图

使用插槽slot 使用起来就和原来的table一样了

import comTable from "@/components/common/com-table"
import { GetTempletExportList, GetTempletExportInfo } from "../../../api/transfer/index"
import ApiConfig from "@/api/ApiConfig"
export default {
    name: "templet",
    components: {
        comTable
    },
    data() {
        return {
            tableData4: [],
            exporttableData: [],
            multipleSelection: [],
            currentpoint: null,
            currentitem: null,
            itemdialogshow: false,
            pointdialogshow: false,
            path: new ApiConfig().GetConfig().SysPath,
            checkeditem: [],//选中数据
        }
    },
    computed: {
        moduletype() {
            return this.$store.state.moduletype;
        },
        userinfo() {
            return this.$store.state.user.userInfo;
        }
    },
    watch: {
        moduletype() {
            this.init();
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            GetTempletExportList(this.userinfo.cityid, this.moduletype).then(re => {
                this.exporttableData = re.data;
                this.tableData4 = [];
                re.data.map(item => {
                    this.tableData4.push({
                        name: item.fldTableDesc,
                        point: {
                            visible: false,
                            value: ""
                        },
                        item: {
                            visible: true,
                            value: item.ItemList
                        }
                    })
                })
            }, (error) => {
                this.$message({
                    customClass: "el-message_new",
                    message: error,
                    type: "error"
                });
            })
        },
        handleSelectionChange(val) {
            console.log(val)
            this.multipleSelection = val;
        },
        focuspoint(val) {
            this.currentpoint = val;
        },
        focusitem(val) {
            this.currentitem = val;
            this.itemdialogshow = true;
        },
        itemconfirm() {
            this.itemdialogshow = !this.itemdialogshow;
        },
        itemhandleClose(done) {
            this.itemdialogshow = false;
        },
        ItemGroupSelectchange(val) {
            this.checkeditem = val;
            console.log(this.checkeditem);
            let groupitemcontent = [];
            val.map(item => {
                groupitemcontent.push(item.fldItemName);
            })
            this.currentitem.value = groupitemcontent.join(",");
        },
        submit() {
            if (this.multipleSelection.length > 0) {
                let message = "";
                let data = [];
                let name = "";
                this.multipleSelection.map((item, index) => {
                    name = item.name;
                    let str = item.name;
                    let info = false;
                    if (item.item.visible && item.item.value == "") {
                        message += `表[${str}]请选择因子`;
                        info = true;
                    }
                    if (item.point.visible && item.point.value == "") {
                        if (info) {
                            message += `、请选择测点/断面！`;
                        } else {
                            message += `表[${str}]请选择测点/断面！`;
                        }
                        info = true;
                    }
                    if (info) {
                        message += "
"
                    }
                    data.push({
                        "AutoID": "1",
                        "STCode": "",
                        "PCode": "",
                        "RCode": "",
                        "RScode": "",
                        "GDCODE": "",
                        "type": this.moduletype,
                        "itemcodeList": item.item.value.split(",").join("^"),
                        "path": `${this.path.TempletExportSetting}${this.moduletype}.json`,
                        "IsNeedNullData": "Y"
                    })

                })
                if (message == "") {
                    GetTempletExportInfo(data).then(re => {
                        if (re.status == "ok") {
                            var exportdata = eval((re.data));
                            const { export_json_to_excel } = require("../../../libs/Export2Excel");
                            if (exportdata[0].merg.length != 0) {
                                var exdata = [];
                                var itemlistUnit = [];
                                var itemlistfldCharCode = [];
                                for (var z = 0; z < exportdata[0].head.length - this.checkeditem.length; z++) {
                                    itemlistUnit.push(exportdata[0].head[z]);
                                    itemlistfldCharCode.push(exportdata[0].head[z])
                                }
                                this.checkeditem.map(item => {
                                    itemlistUnit.push(item.fldUnit);
                                    itemlistfldCharCode.push(item.fldCharCode);
                                })
                                var exdata = this.formatJson(exportdata[0].head, exportdata[0].data);
                                exdata.unshift(itemlistUnit);
                                exdata.unshift(itemlistfldCharCode);
                                exdata.unshift(exportdata[0].head);
                                console.log(exdata)
                                exportdata[0].merg.push([0, 0, exportdata[0].head.length - 1, 0])
                                export_json_to_excel([name], exdata, name, exportdata[0].merg);
                            } else {
                                var exdata = this.formatJson(exportdata[0].head, exportdata[0].data);
                                exdata.unshift(exportdata[0].head);
                                exportdata[0].merg.push([0, 0, exportdata[0].head.length - 1, 0])
                                export_json_to_excel([name], exdata, name, exportdata[0].merg);
                            }

                        } else {
                            this.$message({
                                message: "导出失败！",
                                type: "error"
                            });
                        }
                    })
                } else {
                    this.$message({
                        dangerouslyUseHTMLString: true,
                        customClass: "el-message_new",
                        message: message,
                        type: "warning"
                    });
                }
            } else {
                this.$message({
                    customClass: "el-message_new",
                    message: "请先选择要导出的列表！",
                    type: "warning"
                });
            }
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v =>
                filterVal.map(j => {
                    return v[j];
                })
            );
        }
    }
}

    class CommonWay {
    /**
     * description：对数组的分页处理
     * author:bilimumu
     * date:2017-10-28 
     * @param {number} [pageNo=1] 页码
     * @param {number} [pageSize=10] 每页显示条数 
     * @param {any} [obj=[]] 待分页的数组
     *  @param {Boolean} [iscreateNewdata=true] 是否创建新的数据
     * @returns 返回新的数组
     * @memberof CommonWay
     */
    pagination(pageNo = 1, pageSize = 10, obj = [], iscreateNewdata = true) {
        var array = [];
        if (iscreateNewdata) {
            array = JSON.parse(JSON.stringify(obj));
        } else {
            array = obj;
        }
        var offset = (pageNo - 1) * pageSize;
        return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
    }
}

export default CommonWay

.com-table {
    height: 100%;
    width: 100%;
    &-title {
        color: #FFF;
        background: #42A2F5;
        padding: 0;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        text-indent: 8px;
    }
    &-content {
        width: 100%;
        height: calc(100% - 40px - 55px);
    }
    &-content-nottitle {
        width: 100%;
        height: calc(100% - 55px);
    }
    &-page {
        height: 55px;
        width: 100%;
        background: #EFF3F8;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}