ElementUI之动态树+数据表格+分页2

简介: ElementUI之动态树+数据表格+分页2

二.数据表格+动态分页

1.前端模板

<div class="Book" style="padding: 30px;">
    <!-- 输入框搜索 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书籍名称 : ">
        <el-input v-model="bookname" placeholder="书籍名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 书籍的书籍表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="price" label="书籍价格"></el-table-column>
      <el-table-column prop="booktype" label="书籍类型"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>

前端组件功能详解

1.<div class="Book">:这是一个CSS类为"Book"的<div>元素,它可能用于样式控制或布局目的。

2.输入框搜索部分:

   1.<el-form :inline="true" class="demo-form-inline">:这是一个Element UI的表单组件,设置为内联显示  (:inline="true")。内联表单通常用于简单的搜索功能。

   2.<el-form-item label="书籍名称 : ">:表单项,用于包裹输入框,并设置了一个标签文本"书籍名称"。

   3.<el-input v-model="bookname" placeholder="书籍名称"></el-input>:这是一个Element UI的输入框组件,它使用v-model双向绑定到bookname数据属性,允许用户输入书籍名称,并设置了一个占位符文本"书籍名称"。

   4.<el-button type="primary" plain @click="onSubmit">查询</el-button>:这是一个Element UI的按钮组件,用于触发查询操作。它被设置为主要按钮样式(type="primary"),并绑定了点击事件@click="onSubmit",当用户点击时会调用组件中的onSubmit方法。

3.书籍表格部分:

   1.<el-table :data="tableData" style="width: 100%">:这是一个Element UI的表格组件,用于显示书籍列表数据。:data="tableData"将表格的数据与组件中的tableData数据属性绑定,style="width: 100%"设置表格宽度为100%。

   2.<el-table-column prop="id" label="书籍ID"></el-table-column>:这是一个表格列组件,定义了一列书籍ID,使用prop属性指定数据属性名,label属性设置列标题。

   3.类似地,有三个更多的<el-table-column>用于显示书籍的名称、价格和类型。

4.分页部分:

   1.<div class="block" style="padding: 20px;">:一个用于包裹分页组件的<div>元素,它可能用于样式控制或布局。

   2.<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">:这是一个Element UI的分页组件,它允许用户在表格数据中进行分页浏览。在这里,它绑定了一些事件(@size-change、@current-change),并使用属性绑定来配置分页的一些参数,包括当前页码、可选择的页大小列表、每页显示的行数、布局方式和总记录数。

总的来说,这个组件创建了一个用户可以输入书籍名称并点击查询按钮来搜索书籍的界面。搜索结果以表格的形式展示,并且提供了分页功能,以便在大量书籍数据中进行浏览。当用户更改页大小或切换页码时,会触发相应的事件,调用组件中的方法来获取并显示相应的书籍数据。

2.通过JS交互获取后端数据

export default {
    data() {
      return {
        bookname: '',
        tableData: [],
        rows: 10,
        total: 0,
        page: 1
      }
    },
    methods: {
      handleSizeChange(r) {
        //当页大小发生变化
        let params = {
          bookname: this.bookname,
          rows: r,
          page: this.page
        }
        // console.log(params)
        this.query(params);
      },
      handleCurrentChange(p) {
        //当前页码大小发生变化
        let params = {
          bookname: this.bookname,
          rows: this.rows,
          page: p
        }
        // console.log(params)
        this.query(params);
      },
      query(params) {
        //获取后台请求书籍数据的地址
        let url = this.axios.urls.SYSTEM_BookList;
        this.axios.get(url, {
          params: params
        }).then(d => {
          console.log(url)
          this.tableData = d.data.rows;
          this.total = d.data.total;
        }).catch(e => {});
      },
      onSubmit() {
        let params = {
          bookname: this.bookname
        }
        console.log(params)
        this.query(params);
        this.bookname = ''
      }
    },
    created() {
      this.query({})
    }
  }

方法详解:

1.handleSizeChange(r): 当页大小发生变化时调用的方法,根据参数r(新的页大小)以及当前的bookname和page,构建请求参数并调用query方法进行数据查询。

handleCurrentChange(p): 当前页码大小发生变化时调用的方法,根据参数p(新的页码)以及当前的bookname和rows,构建请求参数并调用query方法进行数据查询。

2.query(params): 发起后台请求书籍数据的方法,根据传入的参数params,发送GET请求到this.axios.urls.SYSTEM_BookList指定的后台接口地址,然后将返回的数据的rows(行数据)和total(总记录数)分别赋值给tableData和total。

3.onSubmit(): 表单提交方法,在查询书籍数据时调用,根据当前的bookname构建请求参数并调用query方法进行数据查询,然后将bookname重置为空字符串

3 效果演示

今天的分享到这里就结束了,感谢各位大大的观看,各位大大的三连是博主更新的动力,感谢谢谢谢谢谢谢谢谢各位的支持!!!!!

目录
相关文章
|
SQL 前端开发 API
关于ElementUI之动态树+数据表格+分页实例
关于ElementUI之动态树+数据表格+分页实例
172 0
|
数据库
ElementUI动态树,数据表格以及分页的实现
ElementUI动态树,数据表格以及分页的实现
|
12月前
|
JavaScript 数据库
Vue之ElementUI之动态树+数据表格+分页(项目功能)
Vue之ElementUI之动态树+数据表格+分页(项目功能)
131 0
|
SQL 前端开发 搜索推荐
【Element-UI】实现动态树、数据表格及分页效果
在现代软件开发中,动态树、数据表格以及分页效果成为了许多应用的核心需求。随着业务规模和复杂性的增加,我们往往需要展示大量的层级结构数据,并且实现交互性强且高效的操作。 动态树提供了一种组织结构清晰、可伸缩的展示方式,使用户可以方便地查看和操作树节点。数据表格则是以表格形式呈现数据,在其中用户可以进行排序、筛选、编辑等操作。 而分页效果则能够将大量数据分割成易于管理和浏览的一页或一页的内容。这三种功能的结合,不仅使得我们能够更好地处理庞大的数据集合,同时也使得用户能够快速定位所需信息。 本文将介绍如何使用现代前端技术实现动态树、数据表格及分页
|
JavaScript
Layui数据表格嵌套文件上传按钮
Layui数据表格嵌套文件上传按钮
205 0
|
前端开发 JavaScript API
在 Vue3 + Element Plus 中生成动态表格,动态修改表格,多级表头,合并单元格
在 Vue 中,表格组件是使用频率及复杂度排名第一的组件,前端经常需要根据后台返回的数据动态渲染表格,比如动态表格如何生成,因为表格的列并不是固定的,在未知表格具体有哪些列的场景下,前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理,比如第一列是日期,需要把相同的日期进行合并,这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云 ,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即
3076 0
|
5月前
|
API
9.SPA项目开发之动态树+数据表格+分页
9.SPA项目开发之动态树+数据表格+分页
45 0
|
12月前
|
JavaScript 前端开发
【Vue.js】使用ElementUI搭建动态树&数据表格与分页
【Vue.js】使用ElementUI搭建动态树&数据表格与分页
111 0
|
前端开发 API 网络架构
Vue+ElementUI实现动态树和表格数据的分页模糊查询
Vue+ElementUI实现动态树和表格数据的分页模糊查询
160 0
|
11月前
ElementUI之动态树+数据表格+分页->动态树,动态表格
ElementUI之动态树+数据表格+分页->动态树,动态表格
42 0