【JaveWeb教程】(8)Web前端基础:Vue组件库Element之Table表格组件和Pagination分页组件 详细示例介绍

这篇具有很好参考价值的文章主要介绍了【JaveWeb教程】(8)Web前端基础:Vue组件库Element之Table表格组件和Pagination分页组件 详细示例介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript
接下来我们来学习一下ElementUI的常用组件,对于组件的学习比较简单,我们只需要参考官方提供的代码,然后复制粘贴即可。本节主要学习Tbale表格组件和Pagination分页组件

1 Table表格组件

1.1 组件演示

Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

接下来我们通过代码来演示。

首先我们需要来到ElementUI的组件库中,找到表格组件,如下图所示:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

然后复制代码到我们之前的ElementVue.vue组件中,需要注意的是,我们组件包括了3个部分,如果官方有除了template部分之外的style和script都需要复制。具体操作如下图所示:

template模板部分:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

script脚本部分

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

ElementView.vue组件文件整体代码如下:

<template>
    <div>
    <!-- Button按钮 -->
        <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>

        <!-- Table表格 -->
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
     data() {
        return {
          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 弄'
          }]
        }
      }
}
</script>

<style>

</style>

此时回到浏览器,我们页面呈现如下效果:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

1.2 组件属性详解

那么我们的ElementUI是如何将数据模型绑定到视图的呢?主要通过如下几个属性:

  • data: 主要定义table组件的数据模型
  • prop: 定义列的数据应该绑定data中定义的具体的数据模型
  • label: 定义列的标题
  • width: 定义列的宽度

其具体示例含义如下图所示:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

PS:Element组件的所有属性都可以在组件页面的最下方找到,如下图所示:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

2 Pagination分页

2.1 组件演示

Pagination: 分页组件,主要提供分页工具条相关功能。其展示效果图下图所示:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

接下来我们通过代码来演示功能。

首先在官网找到分页组件,我们选择带背景色分页组件,如下图所示:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

然后复制代码到我们的ElementView.vue组件文件的template中,拷贝如下代码:

<el-pagination
    background
    layout="prev, pager, next"
    :total="1000">
</el-pagination>

浏览器打开呈现如下效果:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

2.2 组件属性详解

对于分页组件我们需要关注的是如下几个重要属性(可以通过查阅官网组件中最下面的组件属性详细说明得到):

  • background: 添加北京颜色,也就是上图蓝色背景色效果。
  • layout: 分页工具条的布局,其具体值包含sizes, prev, pager, next, jumper, ->, total, slot 这些值
  • total: 数据的总数量

然后根据官方分页组件提供的layout属性说明,如下图所示:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

我们修改layout属性如下:

 layout="sizes,prev, pager, next,jumper,total"

浏览器打开呈现如下效果:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

发现在原来的功能上,添加了一些额外的功能,其具体对应关系如下图所示:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

2.3 组件事件详解

对于分页组件,除了上述几个属性,还有2个非常重要的事件我们需要去学习:

  • size-change : pageSize 改变时会触发
  • current-change :currentPage 改变时会触发

其官方详细解释含义如下图所示:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

对于这2个事件的参考代码,我们同样可以通过官方提供的完整案例中找到,如下图所示:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript

然后我们找到对应的代码,首先复制事件,复制代码如下:

@size-change="handleSizeChange"
@current-change="handleCurrentChange"

此时Panigation组件的template完整代码如下:

<!-- Pagination分页 -->
<el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               background
               layout="sizes,prev, pager, next,jumper,total"
               :total="1000">
</el-pagination>

紧接着需要复制事件需要的2个函数,需要注意methods属性和data同级,其代码如下:

methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val}`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },

此时Panigation组件的script部分完整代码如下:

<script>
export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val}`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
     data() {
        return {
          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 弄'
          }]
        }
      }
}
</script>

回到浏览器中,我们f12打开开发者控制台,然后切换当前页码和切换每页显示的数量,呈现如下效果:

前端表格组件库,Element教程,Java教程,# 15天学会JavaWeb开发,前端,vue.js,javascript文章来源地址https://www.toymoban.com/news/detail-788092.html

到了这里,关于【JaveWeb教程】(8)Web前端基础:Vue组件库Element之Table表格组件和Pagination分页组件 详细示例介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue自定义table 表格 表格组件 Excel组件

    前端组件化开发与Excel组件设计 一、前端开发的复杂性与组件化的必要性 随着技术的发展,前端开发的复杂度越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。

    2024年02月09日
    浏览(52)
  • 前端vue3+element plus 分页table排序功能实现

    我有如下所示的一个table,数据data是一个computed计算属性,一般情况下筛选使用element的sortable属性就可以了,可查看Element - The world\\\'s most popular Vue UI framework 但我的 table 是一个分页的 table ,当我使用 sortable 时发现,它只是对当前页的数据进行排序,但这并不是我需要的,我的

    2024年02月14日
    浏览(48)
  • Vue中使用Element UI的Table组件实现嵌套表格(最简单示例)

    以下是一个简单的示例代码,演示如何在Vue中使用Element UI的Table组件实现嵌套表格: 上面的代码通过type=\\\"expand\\\"设置了一个展开按钮,点击该按钮会显示与当前行关联的子表格内容。 在上面的示例中,我们定义了一个包含姓名和年龄的主表格,以及一个展开列用于显示与每行

    2024年02月02日
    浏览(65)
  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(52)
  • JavaWeb_Web前端_Element组件库

    在当前工程的目录下, 打开命令行执行如下指令: npm install element-ui@2.15.3 在main.js中添加如下代码: 添加组件 在views目录下创建element目录, 并在element目录下创建ElementView.vue, 代码如下所示: 导入到根组件 在App.vue的template的div中输入如下代码: 自动生成代码如下: EmpView.vue 打包按钮

    2024年02月03日
    浏览(37)
  • 基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件

    基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件,开箱即用 A Vue 3.x Table Component built on Webpack 5 该组件库可供学习、参考和用于二次开发。 1.基于 Webpack 5 构建 2.全面支持 Vue 3 3.支持 JSON 序列化表格快速配置 4.已内置 Pagination 分页 5.支持自定义 prop 列名 6.支持单元格内容自

    2024年04月13日
    浏览(77)
  • Vue 中 Element UI 的 el-table 组件实现动态表头和内容

    在 Vue 中使用 Element UI 的 el-table 组件时,为了实现动态表头(包括第一层表头及其下的嵌套表头或子表头)。需要后端返回的数据结构能够体现表头层级关系以及对应的数据结构相匹配。这样的数据通常是一个嵌套数组,每个表头单元可能包含自身的列信息以及它的子表头和

    2024年01月20日
    浏览(52)
  • vue | element-ui中 如何修改表格Table组件中滚动条的样式

    在Table表格中,当内容超出容器时就会出现滚动条,elemnt-ui自带的滚动条有时无法满足需求,那么我们可以通过css伪类来实现对滚动条的自定义。 滚动条由两部分组成的: 滑块:可以滑动的部分。 轨道:滚动条的轨道,即滑块的轨道。一般来说滑块的颜色比轨道的颜色深一

    2024年02月11日
    浏览(53)
  • Web前端篇——element-plus组件设置全局中文

    背景:在使用el-date-picker组件时,发现组件中的文字默认都是英文。 设置全局中文的方法如下:(本文只介绍CDN方式) 注: script里面unpkg方式的链接有时访问很慢(有时可能需要‘科学上网’),且为了防止其版本更新导致不兼容,尽可能将其下载到本地js文件中进行引入。

    2024年01月23日
    浏览(40)
  • 沉淀自己的pro-table组件,并发布到npm(Vue3、element-plus)

    传送门 约定:npm包名 vue3-el-pro-table ,引用 vue3-el-pro-table 的包名为“本项目”。 声明: Vue3ProTable.vue 代码是在这个项目的基础上进行修改的。 作者:hans774882968以及hans774882968以及hans774882968 Quick Start src/main.ts Then use vue3-pro-table / directly in .vue file. Import interface: Component props defi

    2024年02月16日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包