15天深度复习JavaWeb的详细笔记(十一)——VUE、Element

最新推荐文章于 2024-06-01 14:41:33 发布
最新推荐文章于 2024-06-01 14:41:33 发布
阅读量393 收藏 1
点赞数
分类专栏： JavaWeb 文章标签： vue.js 前端 javascript 前端框架 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maxiangyu_/article/details/127003144
版权

文章目录

demo11-VUE、Element

1，VUE

1.1 概述

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

我们之前也学习过后端的框架 Mybatis ，Mybatis 是用来简化 jdbc 代码编写的；而 VUE 是前端的框架，是用来简化 JavaScript 代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下

在这里插入图片描述

学习了 VUE 后，这部分代码我们就不需要再写了。那么 VUE 是如何简化 DOM 书写呢？

==基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。==之前我们是将关注点放在了 DOM 操作上；而要了解 MVVM 思想，必须先聊聊 MVC 思想，如下图就是 MVC 思想图解

在这里插入图片描述

C 就是咱们 js 代码，M 就是数据，而 V 是页面上展示的内容，如下图是我们之前写的代码

在这里插入图片描述

MVC 思想是没法进行双向绑定的。双向绑定是指当数据模型数据发生变化时，页面展示的会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。接下来我们聊聊 MVVM 思想，如下图是三个组件图解

在这里插入图片描述

图中的 Model 就是我们的数据，View 是视图，也就是页面标签，是用户可以通过浏览器看到的内容；Model 和 View 是通过 ViewModel 对象进行双向绑定的，而 ViewModel 对象是 Vue 提供的。接下来让大家看一下双向绑定的效果

在这里插入图片描述

  • input输入框和{{username}}是视图,username是模型
  • input输入框输入数据后,会将数据绑定到username模型上,然后{{username}}又把模型中的数据取出来进行展示
  • 最后结果是:第一个视图(输入框)变化后模型会跟着变化,模型变化后第二个视图({{username}})会跟着变化

通过浏览器打开该页面可以看到如下页面

在这里插入图片描述

当我们在输入框中输入内容，而输入框后面随之实时的展示我们输入的内容，这就是双向绑定的效果。

1.2 快速入门

  1. 新建 HTML 页面，引入 Vue.js文件

    <script src="js/vue.js"></script>

  2. 在JS代码区域，创建Vue核心对象，进行数据绑定

    new Vue({
    el: "#app",
    data() {
        return {
            username: ""
        }
    }
});

    创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：

    • el ： 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
    • data ：用来定义数据模型
    • methods ：用来定义函数。这个我们在后面就会用到

  3. 编写视图

    <div id="app">
    <input name="username" v-model="username" >
    {{username}}
</div>

    {{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

在项目下创建01-vue-demo1.html,编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>
<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:""
            }
        }

        /*data: function () {
            return {
                username:""
            }
        }*/
    });
</script>
</body>
</html>

1.3 Vue 指令

**指令：**HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

常用的指令有：

指令作用
v-bind为HTML标签绑定属性值，如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if
v-else
v-else-if		条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show根据条件展示某元素，和上面的三个条件渲染区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或者对象的属性
1.3.1 v-bind & v-model 指令

  • v-bind

    该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化

    例如：

    <a v-bind:href="url">百度一下</a>

    上面的 v-bind:" 可以简化写成 : ，如下：

    <!--
	v-bind 可以省略
-->
<a :href="url">百度一下</a>

  • v-model

    该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如：

    <input name="username" v-model="username">

在项目下创建02-vue-bind.html,编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <a v-bind:href="url">点击一下</a>
    <a :href="url">点击一下</a>
    <input v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                url:"https://www.baidu.com"
            }
        }
    });
</script>
</body>
</html>

通过浏览器打开上面页面，并且使用检查查看超链接的路径，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据

在这里插入图片描述

1.3.2 v-on 指令

我们在页面定义一个按钮，并给该按钮使用 v-on 指令绑定单击事件，html代码如下

<input type="button" value="一个按钮" v-on:click="show()">//如果show函数有参还需要传递参数

而使用 v-on 时还可以使用简化的写法，将 v-on: 替换成 @，html代码如下

<input type="button" value="一个按钮" @click="show()">

注意：v-on: 后面的事件名称是之前原生事件属性名去掉on。

例如：

  • 单击事件 ： 事件属性名是 onclick，而在vue中使用是 v-on:click
  • 失去焦点事件：事件属性名是 onblur，而在vue中使用时 v-on:blur

在项目下创建03-vue-on.html,编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="一个按钮" v-on:click="show()"><br>
    <input type="button" value="一个按钮" @click="show()">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        methods:{
            show(){
                alert("我被点了...");
            }
        }
    });
</script>
</body>
</html>
1.3.3 条件判断指令

在项目下创建04-vue-if.html,编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-if="count == 1">div1</div>
    <div v-else-if="count == 2">div2</div>
    <div v-else>div3</div>
    <hr>
    <div v-show="count == 2">div v-show</div>
    <br>
    <input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        //定义一个数据模型
        data(){
            return {
                count:2
            }
        }
    });
</script>
</body>
</html>

打开浏览器进行测试，发现 v-show 和 v-if 效果一样，那它们到底有什么区别呢？我们根据浏览器的检查功能查看源代码

在这里插入图片描述

通过上图可以看出 v-show 不展示的原理是给对应的标签添加 display css属性，并将该属性值设置为 none ，这样就达到了隐藏的效果。而 v-if 指令是条件不满足时根本就不会渲染。

1.3.4 v-for 指令

这个指令是用来遍历的，该指令使用的格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

在项目下创建05-vue-for.html,编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>
    <hr>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                addrs:["北京","上海","西安"]
            }
        }
    });
</script>
</body>
</html>

  • 注意：需要循环哪个标签，v-for 指令就写在那个标签上

    • 就该案例来说,v-for指令放在了div标签上,所以div标签就复制了三次

    在这里插入图片描述

1.4 生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

在这里插入图片描述

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

在这里插入图片描述

看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 mounted 就行了。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。

先初步认识一下该方法:在项目下创建06-vue-生命周期.html,编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        /*mounted:function () {

        }*/
        mounted(){
            alert("加载完成...")
        }
    });
</script>
</body>
</html>

2，Element

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~

如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。

在这里插入图片描述

我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是

https://element.eleme.cn/#/zh-CN

2.1 快速入门

  1. 将 element-ui 文件夹直接拷贝到项目的 webapp 下。目录结构如下

在这里插入图片描述

  1. 创建页面，并在页面引入Element 的css、js文件 和 Vue.js

    <script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

  2. .创建Vue核心对象

    Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象

    <script>
    new Vue({
        el:"#app"
    })
</script>

  3. 官网复制Element组件代码

在项目下创建07-Element-demo1.html,编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">删除</el-button>
    </el-row>

    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

2.2 Element 布局

Element 提供了两种布局方式，分别是：

  • Layout 布局
  • Container 布局容器
2.2.1 Layout 局部

通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

在这里插入图片描述

在左菜单栏找到 Layout 布局 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 head 标签内，将html标签拷贝到 <div id="app"></div> 标签内。

在项目下创建08-Element-布局.html,编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .el-row {
            margin-bottom: 20px;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

现在需要添加一行，要求该行显示8个格子，通过计算每个格子占 3 栏，具体的html 代码如下

<!--
添加一行，8个格子  24/8 = 3
-->
<el-row>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
2.2.2 Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。

如下图是官网提供的 Container 布局容器实例：

在这里插入图片描述

该效果代码中包含了样式、页面标签、模型数据。将里面的样式 <style> 拷贝到我们自己页面的 head 标签中；将html标签拷贝到 <div id="app"></div> 标签中，再将数据模型拷贝到 vue 对象的 data() 中。

在项目下创建09-Element-布局2.html,编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-submenu index="2-1">
                        <template slot="title">选项1</template>
                        <el-menu-item index="2-1-1">选项1-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item)
            }
        }
    })
</script>
</body>
</html>

2.3 案例

其他的组件我们通过完成一个页面来学习。

我们要完成如下页面效果

在这里插入图片描述

要完成该页面，我们需要先对这个页面进行分析，看页面由哪儿几部分组成，然后到官网进行拷贝并修改。页面总共有如下组成部分

在这里插入图片描述

还有一个是当我们点击 新增 按钮，会在页面正中间弹出一个对话框，如下

在这里插入图片描述

2.3.1 准备基本页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
	
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app"
    })
</script>
</body>
</html>
2.3.2 完成表格展示

使用 Element 整体的思路就是 拷贝 + 修改。

2.3.2.1 拷贝

在这里插入图片描述

在左菜单栏找到 Table 表格并点击，右边主体就会定位到表格这一块，找到我们需要的表格效果（如上图），点击 显示代码 就可以看到这个表格的代码了。

将html标签拷贝到 <div id="app"></div> 中，如下：

在这里插入图片描述

将css样式拷贝到我们页面的 head 标签中，如下

在这里插入图片描述

将方法和模型数据拷贝到 Vue 对象指定的位置

在这里插入图片描述

拷贝完成后通过浏览器打开可以看到表格的效果

在这里插入图片描述

表格效果出来了，但是显示的表头和数据并不是我们想要的，所以接下来就需要对页面代码进行修改了。

2.3.2.2 修改

  1. 修改表头和数据

    下面是对表格代码进行分析的图解。根据下图说明修改自己的列数和列名

在这里插入图片描述

修改完页面后，还需要对绑定的模型数据进行修改，下图是对模型数据进行分析的图解

在这里插入图片描述

  1. 给表格添加操作列

    从之前的表格拷贝一列出来并对其进行修改。按钮是从官网的 Button 按钮 组件中拷贝并修改的

在这里插入图片描述

  1. 给表格添加复选框列和标号列

    给表格添加复选框和标号列，效果如下

在这里插入图片描述

此效果也是从 Element 官网进行拷贝，先找到对应的表格效果，然后将其对应代码拷贝到我们的代码中，如下是复选框列官网效果图和代码

在这里插入图片描述

这里需要注意在 <el-table> 标签上有一个事件 @selection-change="handleSelectionChange" ，这里绑定的函数也需要从官网拷贝到我们自己的页面代码中，函数代码如下：

在这里插入图片描述

从该函数中又发现还需要一个模型数据 multipleSelection ，所以还需要定义出该模型数据

标号列也用同样的方式进行拷贝并修改:

在这里插入图片描述

2.3.3 完成搜索表单展示

在 Element 官网找到横排的表单效果，然后拷贝代码并进行修改

在这里插入图片描述

点击上面的 显示代码 后，就会展示出对应的代码，下面是对这部分代码进行分析的图解

在这里插入图片描述

然后根据我们要的效果修改代码:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.3.4 完成批量删除和新增按钮展示

从 Element 官网找具有着色效果的按钮，并将代码拷贝到我们自己的页面上

在这里插入图片描述

2.3.5 完成对话框展示

在 Element 官网找对话框，如下：

在这里插入图片描述

下面对官网提供的代码进行分析

在这里插入图片描述

上图分析出来的模型数据需要在 Vue 对象中进行定义。

2.3.6 完成分页条展示

在 Element 官网找到 Pagination 分页 ，在页面主体部分找到我们需要的效果，如下

在这里插入图片描述

点击 显示代码 ，找到 完整功能 对应的代码，接下来对该代码进行分析

在这里插入图片描述

上面代码属性说明：

  • page-size ：每页显示的条目数

  • page-sizes ： 每页显示个数选择器的选项设置。

    :page-sizes="[100,200,300,400]" 对应的页面效果如下：

在这里插入图片描述

  • currentPage ：当前页码。我们点击那个页码，此属性值就是几。
  • total ：总记录数。用来设置总的数据条目数，该属性设置后， Element 会自动计算出需分多少页并给我们展示对应的页码。

事件说明：

  • size-change ：pageSize 改变时会触发。也就是当我们改变了每页显示的条目数后，该事件会触发。
  • current-change ：currentPage 改变时会触发。也就是当我们点击了其他的页码后，该事件会触发。
2.3.7 完整页面代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }
        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->
    <el-row>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>
    
    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <el-row>
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </el-row>
            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>

</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el: "#app",
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
                console.log(this.brand);
            },
            // 添加数据
            addBrand(){
                console.log(this.brand);
            },
            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        data() {
            return {
                // 当前页码
                currentPage: 4,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,

                // 品牌模型数据
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id:"",
                    ordered:"",
                    description:""
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [{
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }]
            }
        }
    })
</script>
</body>
</html>
认真生活的灰太狼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
14_JavaWeb——Vue配套资源
05-09
此资源与我的博客14_JavaWeb——Vue中的案例配套，使用Vue简化了数据的查询和添加功能，希望能够有所帮助
javaweb项目实（含笔记与详细实现步骤）
07-20
javaweb项目实例，适合新手，超级详细，内含笔记与详细实现步骤
15天深度复习JavaWeb的详细笔记(十)——Filter、Listener、Ajax
maxiangyu_的博客
09-22 406
Filter 表示过滤器，是JavaWeb 三大组件(Servlet、Filter、Listener)之一过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。如下图所示，浏览器可以访问服务器上的所有的资源（servlet、jsp、html等）而在访问到这些资源之前可以使过滤器拦截来下，也就是说在访问资源之前会先经过 Filter，如下图权限控制、统一编码处理、敏感字符处理等等…过滤器链是指在一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器链。
JavaWeb开发 —— Element组件
hdakj22的博客
04-12 1060
简单介绍什么是Element？、Element组件的快速入门使用以及常见组件
Javaweb基础-组件库Element
qq_52550495的博客
03-12 326
默认展示App.Vue跟组件的内容，如果要展示自己写的，
JavaWeb--Element
Eumenides_Suki的博客
03-13 440
目标Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是 进入官网能看到如下页面接下来直接点击 ，页面如下将资源 下的 文件夹直接拷贝到项目的 下。目录结构如下创建页面，并
JavaWeb——Element
m0_63544124的博客
05-15 127
组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*！！！！！！！！样式放这里*/ </
Element的使用—JavaWeb
wwl193206126的博客
03-29 377
element的使用
javaweb详细笔记，绝对详细（内含代码）
12-12
javaweb HTML&CSS;知识点 Javascript知识点 jQuery知识点 14 Bootstrap知识点 17 JDBC & 配置文件 & 连接池 19 Xml文档及解析 31 反射 33 Http协议和Tomcat服务器 36 JavaWeb核心之Servlet 41 ...
JavaWeb03-Vue学习笔记
08-22
JavaWeb03-Vue学习笔记
javaweb第二天笔记.pdf
11-27
javaweb第二天笔记.pdf
JavaWeb—Vue&Element
weixin_61843013的博客
07-11 554
前端框架Vue的基本使用
javaweb 之 VUE 快速入门 ElementUI使用
m0_73859807的博客
11-20 715
el：绑定视图的idv-model 绑定一个模型 数值改变则模型改变，模型改变其他的数值也会改变达到双向绑定的效果v-bind 可以省略为 冒号 如 v-on可以省略为 @ 如 v-if 在网页上，如果判断为false 那么该标签都不会显示v-show 相当于切换了display属性的值，就算判定是false标签还是会加载进去的，display设置成了none遍历几次就会生成几次的标签。
JavaWeb-14-Element案例
yelitoudu的博客
08-21 144
前端路由：URL中的hash(#号) 与组件之间的对应关系。介绍： Vue Router 是 Vue 的官方路由。组成：VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件：请求链接组件，浏览器会解析成：动态视图组件，用来渲染展示与路由路径对应的组件安装（创建vue项目时已经选择了vue路由定义路由：① 请求链接组件：​② 定义路由表：​Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。
JavaWeb-13-Element常见组件
yelitoudu的博客
08-21 56
Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。Dialog 对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。Pagination 分页：当数据量过多时，使用分页分解数据。在官网找到自己需要的对话框样式，复制代码并调整运行。复制代码到ElementView.vue中并调整。在官网找到自己需要的表单样式，复制代码。在官网找到自己需要的表格样式。
JavaWeb基础教程-----（12）VUE&Element&综合案例
LL的博客
06-13 198
VUE&Element&综合案例
探索Web前端三大主流框架：React，Angular和Vue.js
最新发布
Kimi2024的博客
06-01 279
其中，React，Angular和Vue.js是最受欢迎的三大主流前端框架，它们分别由Facebook，Google和前Google工程师尤雨溪（Evan You）创建。总的来说，React，Angular和Vue.js各有其独特的优势和特点，选择哪个框架取决于项目的具体需求和开发团队的偏好。不过，无论选择哪个框架，都可以确信，你将站在一个坚实的基础之上，构建出高性能，响应式的Web应用。Angular是一个由Google维护的开源Web应用框架，它提供了一个完整且丰富的功能集，用于构建跨平台的应用。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1090
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 335
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
JavaWeb学习笔记（七）—— JSP
05-22
JSP（JavaServer Pages）是一种服务器端的动态网页开发技术，它可以将 Java 代码嵌入 HTML 页面中，从而实现动态网页的生成。 JSP 的基本原理是将 JSP 页面翻译成 Servlet，在服务器端执行 Servlet 代码，再将执行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

认真生活的灰太狼

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

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

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

打赏作者

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

抵扣说明：

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

余额充值