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

 此篇本章提供 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(() => {

                let url = this.tableUrl + "/" + id ;
                this.$http.delete(url).then((result) => {
                    if (result.code == 10000) {
                        this.$message.success("删除成功")
                        this.getTableData();
                    }
                });

            })
        },
        // 改变页大小
        tablePageSizeChange(size){
            this.tableParam.page = 1;
            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;
};
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: Vue Element UI 后台管理系统首页模板是一个基于Vue.js和Element UI开发的后台管理系统的首页模板。它提供了丰富的UI组件和功能,帮助开发人员快速搭建和定制自己的后台管理系统。 该模板的特点是简洁、美观、易于使用。它采用响应式设计,可以适应不同尺寸的屏幕,包括电脑、平板和手机。页面布局清晰,组件排列合理,用户可以直观地了解系统的各个功能模块和数据统计信息。 该模板提供了丰富的UI组件,包括按钮、表格、表单、对话框、菜单等。这些组件可以轻松地与后端数据进行绑定,实现数据的展示和交互。同时,该模板还提供了许多常用的功能组件,如权限管理、数据可视化、文件上传等,使得开发人员可以更加方便地实现各种需求。 除了UI组件和功能组件,该模板还提供了一套完整的前端架构和开发规范。开发人员可以基于该模板进行二次开发,添加自己的业务逻辑和样式,以及进行自定义配置。同时,该模板还提供了详细的文档和示例代码,帮助开发人员快速入门和解决问题。 总的来说,Vue Element UI 后台管理系统首页模板是一个功能强大、易于使用、可定制的模板,适用于各种后台管理系统的快速开发。它能够帮助开发人员节省大量的时间和精力,提高开发效率,同时也提供了良好的用户体验和可维护性。 ### 回答2: VueElement UI是一对非常强大的前端开发工具组合,它们能够帮助我们快速构建出漂亮且功能丰富的后台管理系统。而在后台管理系统中,首页模板扮演着非常重要的角色。下面将用300字详细介绍VueElement UI配合的后台管理系统首页模板的特点。 VueElement UI的结合可以带来很多优势。首先,Vue框架本身具有数据驱动和组件化的特点,开发者可以通过创建组件、构建数据模型和实现数据绑定来快速搭建系统页面。而Element UI作为一个基于Vue的UI框架,提供了丰富的组件库,包含了按钮、卡片、表格、表单等常用组件,能够帮助我们更快速地构建页面。 在后台管理系统中,首页模板需要具备一些常见的功能和布局,以提供给用户友好的操作界面。通过VueElement UI可以轻松实现以下特点。 首先,首页模板需要包含一个侧边栏和顶部导航栏,侧边栏用于展示系统的菜单导航,而顶部导航栏用于显示用户信息和一些通知。VueElement UI提供了多种布局组件,可以快速实现这种侧边栏和导航栏的布局。 其次,首页模板需要展示一些重要的系统指标和数据统计信息,比如会员数量、订单数量、访问量等等。Vue的数据驱动特性可以很方便地将数据绑定到页面上,通过Element UI提供的卡片、图表等组件,可以直观地展示这些数据。 最后,首页模板还需要提供一些快捷入口和功能区块,比如最新订单、推荐产品、系统公告等。通过VueElement UI提供的组件,可以很容易地创建这些功能区块,并且通过路由导航等功能来实现相关的页面跳转和操作。 综上所述,VueElement UI的后台管理系统首页模板具有快速开发、易于扩展和美观实用等特点。通过组件化的开发方式和丰富的UI组件库,可以帮助我们快速构建出功能强大并且美观的后台管理系统。 ### 回答3: Vue Element UI 是一种基于Vue.js框架和Element UI组件库的后台管理系统首页模板。它提供了一套美观、易用、功能丰富的模板,方便开发者快速构建自己的后台管理系统Vue Element UI 的后台管理系统首页模板具有以下特点: 1. 响应式设计:该模板可以自动适应不同屏幕大小的设备,包括桌面电脑、平板电脑和手机。无论用户使用何种设备访问后台管理系统,都能得到良好的用户体验。 2. 多样化布局:该模板提供了多种布局方案,包括上下布局、左右布局等,适应不同的需求。用户可以根据自己的喜好和业务场景选择合适的布局。 3. 功能丰富:该模板集成了各种常见的后台管理系统功能模块,包括用户管理、角色权限管理、数据分析等,开发者可以基于这些功能模块快速搭建自己的后台系统。 4. 可定制化:该模板提供了丰富的主题和组件样式配置选项,开发者可以根据自己的需求进行定制。同时,该模板使用了Vue.js的组件化开发方式,方便扩展和组合。 5. 国际化支持:该模板提供了多语言支持,可以方便地将后台管理系统适配成不同语言版本,满足不同用户群体的需求。 总之,Vue Element UI 的后台管理系统首页模板是一种功能强大、易用灵活的模板,可以帮助开发者快速构建响应式、美观的后台管理系统。无论是初学者还是有经验的开发者,都可以轻松上手使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

aiguangyuan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值