Element 后台管理系统实用表格布局

Posted 2021-11-21 aiguangyuan

 此篇本章提供 Element 在后台管理系统中开发的一点归纳总结，欢迎大家复制粘贴及吐槽！

<template>
    <div>
        <div class="app-container">

            <!-- 表格搜索 -->
            <div class="filter-container">
                <div class="filter-left">
                    <el-button
                        class="filter-item"
                        style="margin-bottom:0px;"
                        type="primary"
                        @click="addTableData">
                        新增  
                    </el-button>
                </div>

                <div class="filter-right">
                    <el-button
                        class="filter-item"
                        style="margin-bottom:0px;"
                        type="primary"
                        @click="tableSearch">
                        搜索
                    </el-button>

                    <el-button
                        class="filter-item"
                        style="margin-bottom:0px;"
                        @click="resetTable">
                        重置
                    </el-button>
                </div>
            
            </div>



            <!-- 表格主体 -->
            <div class="table-container">
                <el-table
                    border
                    :data="tableData"
                    style="width:100%;"
                    :height="tableHeight">
                    
                    <!-- 属性与字段根据实际情况进行修改 -->
                    <el-table-column prop=" " label="字段"></el-table-column>
                    <el-table-column prop=" " label="字段"></el-table-column>
                    <el-table-column prop=" " label="字段"></el-table-column>
                    <el-table-column prop=" " label="字段"></el-table-column>
                    <el-table-column prop=" " label="字段"></el-table-column>
                    <el-table-column prop=" " label="字段"></el-table-column>
                    <el-table-column prop=" " label="字段"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="obj">
                            <el-button type="primary" @click="editTableData(obj.row.id)">
                                编辑
                            </el-button>
                            <el-button type="default" @click="deleteTableData(obj.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>

            <!-- 表格分页 -->
            <el-pagination
                background
                class="pagination"
                :total="tablePaginate.total"
                :layout="tablePaginate.layout"
                :page-size="tablePaginate.limit"
                :page-sizes="tablePaginate.sizes"
                :current-page="tablePaginate.current"
                @size-change="tablePageSizeChange"
                @current-change="tablePageNumChange"
            />
            
        </div>

    </div>
  


</template>

<script>

import { Loading } from 'element-ui';

import {formatTime,urlEncode} from "@/utils/public";

export default {
    name: "",
    data() {
        return {
            // 表格查询接口
            tableUrl:"",
            // 表格查询参数
            tableParam:{ 
                page:1,
                pageSize:20,
                // 其它条件
            },
            // 表格加载动画
            tableLoading:null,
            // 表格计算高度
            tableHeight:0,
            // 表格动态数据
            tableData:[],
            // 表格分页配置
            tablePaginate: {
                limit:20,
                total:0,
                current:0,
                sizes: [10, 20, 50, 100],
                layout: 'total, sizes, prev, pager, next, jumper',
            },

        };
    },

    created(){
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // 表格高度 = 屏幕高度 - 表格以外的其它元素高度总和
        this.tableHeight = windowHeight - 272;
    },

    mounted(){
        this.getTableData();
    },


    methods: {

        // 表格查询
        getTableData(){
            if(this.tableLoading==null){
                let params = this.tableParam;
                this.tableLoading = Loading.service({
                    text: "加载中",
                    target: ".table-container",
                });
                let url = this.tableUrl + "?" + urlEncode(params).substring(1);
                this.$http.get(url).then((result) => {
                    if (result.code == 10000) {
                        // 表格数据
                        this.tableData = result.data.data;
                        // 分页信息
                        this.tablePaginate.total = result.data.total;
                        this.tablePaginate.current = result.data.current;
                        this.$nextTick(() => {
                            this.tableLoading.close();
                            this.tableLoading = null;
                        });
                    }
                });
            }
        },

        // 表格搜索
        tableSearch(){
            this.tableParam.page = 1;
            this.getTableData();
        },

        // 重置表格
        resetTable(){

            // 重置表格查询参数

            // 重新调用表格查询

        },

        // 新增表格数据
        addTableData(){

            // 打开新增模态框，可与编辑共用

        },

        // 确认新增表格数据
        confirmAddTableData(){

            // 添加模态框点击确认

        },


        // 关闭添加与编辑模态框
        closeAddEditModal(){




        },

        // 编辑表格数据
        editTableData(id){

            // 打开编辑模态框，可与新增共用
            
        },

        // 确认编辑表格数据
        confirmEditTableData(){


            // 编辑模态框点击确认


        },

        // 删除表格数据
        deleteTableData(id){

            this.$confirm('确定要删除这条数据吗 ?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {


                // 发起请求删除数据


            })
        },
        // 改变页大小
        tablePageSizeChange(size){
            this.tableParam.pageSize = size;
            this.getTableData();
        },

        // 改变当前页
        tablePageNumChange(num){
            this.tableParam.page = num;
            this.getTableData();
        }

    },
};
</script>

<style lang="scss" scoped>
.app-container {
    // 屏幕高度 - 面包屑高度
    height: calc(100vh - 132px);
    overflow: hidden;
    .filter-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items:flex-start;
        padding: 0px;
        height: 50px;
        .filter-left{
            display: flex;
            flex-direction: row;
            align-items:center;
            justify-content: flex-start;
        }
        .filter-right{
            display: flex;
            flex-direction: row;
            align-items:center;
            justify-content: flex-end;
        }
    }
    .table-container {
        // 屏幕高度 - 表格以外的其它元素高度总和
        height: calc(100vh - 272px);
        overflow: hidden;
    }
    .pagination{
        height:50px;
        line-height:50px;
        padding:11px 10px;
        border:1px solid #eaedf1;  
    }
}


</style>

 以下是上面代码中引入的public文件代码：

// public.js

// 格式化时间
export  function formatTime(now){
    let year =  now.getFullYear();
    let month =  now.getMonth()+1;
    let date = now.getDate();
    month = month<10?'0'+month:month;
    date = date<10?'0'+date:date;
    let time = year +'-'+month+'-'+date;
    return time;
};

// 参数格式化
export function urlEncode(param, key, encode) {

    if (param == null) {
        return "";
    }

    var paramStr = "";
    var t = typeof param;

    if (t == "string" || t == "number" || t == "boolean") {
        if(param.toString()!=""){
            paramStr +="&" +key +"=" +(encode == null || encode? encodeURIComponent(param): param);
        };
    } else {
        for (var i in param) {
            var k = key == null? i: key +(param instanceof Array? "[" + i + "]": "." + i);
            paramStr += urlEncode(param[i], k, encode);
        }
    };

    return paramStr;
};