ElementUl-布局+分页+表格+导航栏

最新推荐文章于 2024-12-29 21:10:39 发布
最新推荐文章于 2024-12-29 21:10:39 发布
阅读量499 收藏 2
点赞数
分类专栏： web前端基础 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62971115/article/details/132722566
版权
本文展示了如何使用Vue和ElementUI构建一个包含动态表格、列模板、编辑与删除功能以及分页的示例，展示了前端开发中常见的数据展示和用户交互组件的用法。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="cdn.jsdelivr.net_npm_vue@2_dist_vue.js"></script>
    <script src="https://unpkg.com/axios@1.5.0/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>
    <div id="app">
        <template>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="日期" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" width="180">
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.name }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.address }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="info">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" 
                :page-sizes="[10, 20, 30, 40]" 
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" 
                :total="40">
            </el-pagination>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 1,
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            },
            methods: {
                handleEdit(index, row) {
                    console.log(index, row);
                },
                handleDelete(index, row) {
                    console.log(index, row);
                },
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                }
            }
        });
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="cdn.jsdelivr.net_npm_vue@2_dist_vue.js"></script>
    <script src="https://unpkg.com/axios@1.5.0/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-header,
        .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body>.el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>

<body style="height: 100%; overflow: hidden;">
    <div id="app" style="height: 100%;">
        <el-container style="height: 100%;">
            <el-header>Header</el-header>
            <el-container>
                <el-aside>
                    <el-menu background-color="#D3DCE6" text-color="#333">
                        <el-submenu index="1">
                            <template>
                                <span slot="title">导航一</span>
                            </template>
                            <el-menu-item index="1-1">
                                <a href="index.html" target="right">1-1</a></el-menu-item>
                            <el-menu-item index="1-2">
                                <a href="index.html" target="right">1-2</a></el-menu-item>
                            <el-menu-item index="1-3">
                                <a href="index.html" target="right">1-3</a></el-menu-item>
                        </el-submenu>
                        <el-menu-item index="2">
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-submenu index="3">
                            <template>
                                <span slot="title">导航三</span>
                            </template>
                            <el-menu-item index="3-1">3-1</el-menu-item>
                            <el-menu-item index="3-2">3-2</el-menu-item>
                            <el-menu-item index="3-3">3-3</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main style="overflow: hidden;">
                        <iframe name="right" width="100%" height="100%" frameborder="0">
                        </iframe>
                    </el-main>
                </el-container>
            </el-container>
            <el-footer>Footer</el-footer>
        </el-container>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {

            },
            methods: {

            }
        });
    </script>
</body>

</html>

基于elementui的form表单实现的一个高拓展性的表格布局组件
08-10
基于element-ui 的form表单实现的一个高拓展性的表格布局组件，能够用于日常使用表单的布局实现。
vue+elementUI 框架模板
05-06
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
设计Element UI表单组件居然如此简单！
最新发布
JavaEdge全是干货的技术号
12-29 1200
上文讲解了Jest框架对组件库测试，TypeScript和Jest都为代码质量和研发效率。之前实现Container和Button组件以渲染功能为主，可根据不同属性渲染不同样式去实现布局和不同格式的按钮。本文的表单组件，除了要渲染页面组件，还支持很好页面交互，从Element3的表单组件开始。本文设计实现了复杂的组件类型——表单组件。在组件库中作用，就是收集和获取用户的输入值，并提供用户的输入校验，如输入长度、邮箱格式等，符合校验规则后，就可获取用户输入内容，提交给后端。
Element Form表单布局（一行多列）
我的博客
05-27 2万+
ElementUI的页面布局，跟bootstrap一样，是24格栅栏形式的。因此，可以通过row和col组件，以及col组件的span属性，完成Form的布局。 <template> <div> <el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini"> <e
vue-element-ui组件 layout布局（网格系统）
热门推荐
Osborn的博客
08-22 4万+
首先你要掌握的基础知识: .row 行概念   &lt;el-row&gt;&lt;/el-row&gt;   .col 列概念   &lt;el-col&gt;&lt;/el-col&gt;   col组件的:span属性的布局调整,一共分为24栏:   代码示例:   &lt;el-row&gt; &lt;el-col :span="24"&gt
ElementUI Table 布局的调试
qq_39559879的博客
10-21 723
ElTable 提供了很多自定义表格属性的回调函数，但是官方文档中并没有什么例子。实际开发中，需要结合实际的 DOM 来调试，同时也要清楚 ElTable 的每个元素的作用，这样才能少走弯路。
前端速成教程（HTML、CSS、JS、Vue…）
https://www.hyperplasma.top
05-06 3552
JavaWeb开发 SSM框架基础 前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化。Web技术教程：W3Schoo。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。
基于Django和Vue的Python小说系统源码发布
elementUI提供了丰富的组件，如按钮、输入框、表格、表单、导航菜单等，以便开发者快速搭建美观、一致的界面。 4. Vue.js：一个渐进式JavaScript框架，主要用于构建用户界面。Vue.js的核心库只关注视图层，易于上手...
element-ui整体页面布局
m0_72189003的博客
11-10 2405
【代码】element-ui整体页面布局。
Element UI前端页面
abfwaaf的博客
04-10 2101
body{important;
Element-案例-脚本页面布局
weixin_64939936的博客
07-09 1372
根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载。
一个精致典雅的 Element UI 管理模板
RoGroovy的博客
09-22 1637
在Web应用程序的开发过程中，一个好的管理模板可以帮助开发者快速搭建出具有良好用户体验的界面。Element UI 是一套基于 Vue.js 的前端组件库，它提供了丰富的UI组件和交互效果，使得开发者能够轻松构建出漂亮而功能强大的管理后台。在本文中，我们将分享一个精致典雅的 Element UI 管理模板，让你能够快速开始你的项目。首先，我们需要确保你已经安装了 Vue.js 和 Element UI。安装完成后，我们可以开始构建我们的管理模板。
Elementui中El-menu导航栏
06-09 1万+
el-menu官方文档：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/menu 导航栏水平时去除底部白边： 注意：水平时去除底部白边是用的新添加的style标签实现的。其他方式不行，如用::deep，或者直接在原来的style中改，都不行 侧边栏展开时宽度：
div、Flex、element-ui-layout页面布局
长不大的大灰狼
04-15 6280
div页面布局一、页面布局标签属性二、定位属性三、盒子模型 一、页面布局标签属性 1、标签 无意义块状标签<div></div 无意义行内元素标签<span></span> 段落标签<p></p> 无序列表<ul></ul> 列表项<li></li> 超链接标签<a></a> 图片标签<img/> 斜体标签<i></i> 粗体标签&lt
element顶部导航
九亿宅男的梦的博客
04-07 4113
1.html <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#fff" text-color="#909399" active-text-color="#409EFF...
ElementUI 整体页面布局
shykevin的博客
03-02 1万+
一、概述 一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式 二、整体项目布局 因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。 需要分别对头部，左侧区域，主区域拆分成不同的文件。 创建项目 创建一个全新的ElementUI 项目，请参考链接： https://www.cnblogs.com/xiao987334176/p...
【Element入门】4、Element UI 布局组件详解
weixin_52938153的博客
05-22 3994
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
Vue+ELementUI主页布局----侧边栏布局（el-aside）
weixin_51351637的博客
10-04 3万+
第一节Login.vue登录表单知识： Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客具体Element-UI地址：Element - The world's most popular Vue UI framework 目录一、布满整个页面二、主页Header布局三、主页左侧带单布局四、axios请求拦截器添加token，保证拥有获取数据的权限五、发起请求获取左侧菜单数据六、左侧菜单UI绘制6.1优化一级菜单6.2当打开一个一级菜单后其他一级菜单关闭6.3实现左侧菜单的折叠与展开
element-ui 首页布局
℡メ㏑╭ァ小凯
05-07 3804
效果 代码 <template> <div class="app-container home"> <el-row> <el-col :span="5"> <el-card shadow="hover" style="height:280px;"> <div class="text item"> {{'列表内容 ' + o }} .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

MaGgIeOo0

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

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

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

打赏作者

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

抵扣说明：

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

余额充值