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

you_De 發(fā)布于2019-08-22 18:43 / 2521人閱讀

摘要：本人第一次寫這個(gè)寫的不好還望指出來(lái)作為一個(gè)由于公司產(chǎn)品的升級(jí)然促使我從一個(gè)后端人員自學(xué)變成前端的開發(fā)人員公司做的數(shù)據(jù)管理系統(tǒng)所以離不開表格了然后表格樣式統(tǒng)一啥的就想到封裝一個(gè)里面的了效果圖表格組件的引入與使用監(jiān)測(cè)數(shù)據(jù)表格

本人第一次寫這個(gè) 寫的不好還望指出來(lái)
作為一個(gè)由于公司產(chǎn)品的升級(jí)然促使我從一個(gè)后端人員自學(xué)變成前端的開發(fā)人員！
公司做的數(shù)據(jù)管理系統(tǒng)所以離不開表格了然后表格樣式統(tǒng)一啥的就想到封裝一個(gè)element-ui 里面的table+Pagination了
效果圖

表格組件的引入與使用

使用插槽slot 使用起來(lái)就和原來(lái)的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: [],//選中數(shù)據(jù)
        }
    },
    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}]請(qǐng)選擇因子`;
                        info = true;
                    }
                    if (item.point.visible && item.point.value == "") {
                        if (info) {
                            message += `、請(qǐng)選擇測(cè)點(diǎn)/斷面！`;
                        } else {
                            message += `表[${str}]請(qǐng)選擇測(cè)點(diǎn)/斷面！`;
                        }
                        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: "導(dǎo)出失敗！",
                                type: "error"
                            });
                        }
                    })
                } else {
                    this.$message({
                        dangerouslyUseHTMLString: true,
                        customClass: "el-message_new",
                        message: message,
                        type: "warning"
                    });
                }
            } else {
                this.$message({
                    customClass: "el-message_new",
                    message: "請(qǐng)先選擇要導(dǎo)出的列表！",
                    type: "warning"
                });
            }
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v =>
                filterVal.map(j => {
                    return v[j];
                })
            );
        }
    }
}

comTable組件

commonway.js

    class CommonWay {
    /**
     * description：對(duì)數(shù)組的分頁(yè)處理
     * author:bilimumu
     * date:2017-10-28 
     * @param {number} [pageNo=1] 頁(yè)碼
     * @param {number} [pageSize=10] 每頁(yè)顯示條數(shù) 
     * @param {any} [obj=[]] 待分頁(yè)的數(shù)組
     *  @param {Boolean} [iscreateNewdata=true] 是否創(chuàng)建新的數(shù)據(jù)
     * @returns 返回新的數(shù)組
     * @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.scss

.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;
    }
}