element中Table表格控件实现单选功能、多选功能、两种分页方式

目录

  • 1、Table表格控件实现单选功能
  • 2、Table控件和Pagination控件实现多选和两种分页方式
    • 方法一:使用slice方法
    • 方法二:多次调用接口

1、Table表格控件实现单选功能

<template><div><!-- highlight-current-row  是否要高亮当前行 --><!-- row-click  当某一行被点击时会触发该事件 --><el-table :data="tableData" style="width: 100%" @row-click="singleElection" highlight-current-row><el-table-column align="center" min-width="55" label="选择"><template slot-scope="scope"><!-- 可以手动的修改label的值,从而控制选择哪一项 --><!-- 注意:这里写 &nbsp 的目的是为了页面不显示内容,只显示单选操作 --><el-radio class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio></template></el-table-column><el-table-column align="center" prop="id" label="编号" min-width="80"></el-table-column><el-table-column align="center" prop="date" label="日期" min-width="150"></el-table-column><el-table-column align="center" prop="name" label="姓名" min-width="80"></el-table-column><el-table-column align="center" prop="address" label="地址" min-width="250"></el-table-column></el-table></div>
</template><script>
export default {name: "TablePage",data() {return {tableData: [{id: "0001",date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "0002",date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{id: "0003",date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{id: "0004",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],//   当前选择的行的idtemplateSelection: "",//   当前选择的行的数据checkList: [],};},methods: {singleElection(row) {this.templateSelection = row.id;this.checkList = this.tableData.filter((item) => item.id === row.id);console.log(`该行的编号为${row.id}`);},},
};
</script>

在这里插入图片描述

2、Table控件和Pagination控件实现多选和两种分页方式

方法一:使用slice方法

  1. 一次调用后端接口返回所有数据list,然后使用list.slice((pageNum - 1) * pageSize, pageNum * pageSize)使得数据根据页码改变 ;

方法二:多次调用接口

  1. 每次换页都调用接口,后端每次返回该页的数据
<template><div class="app-container"><div class="table-box"><!-- 1)方法一:使用slice方法 --><!-- 一次调用后端接口返回所有数据list,然后使用list.slice((pageNum - 1) * pageSize, pageNum * pageSize)使得数据根据页码改变 --><el-table :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange":data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)"><el-table-column label="序号" type="index" align="center"><template slot-scope="scope"><span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span></template></el-table-column><el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column><el-table-column align="center" prop="id" label="编号" min-width="80"></el-table-column><el-table-column align="center" prop="date" label="日期" min-width="150"></el-table-column><el-table-column align="center" prop="name" label="姓名" min-width="80"></el-table-column><el-table-column align="center" prop="address" label="地址" min-width="250"></el-table-column></el-table></div><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum":page-sizes="[2, 5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination><div class="button-box"><el-button size="small" type="primary" @click="submit">保存</el-button><el-button size="small" @click="reset">重置</el-button></div></div>
</template><script>
export default {name: "PaginationPage",data() {return {// 分页信息 (默认12条,具体可根据项目调用接口)total: 12,pageNum: 1,pageSize: 10,// 选中的id列表ids: [],// 列表list: [{id: "0001",date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",flag: false,},{id: "0002",date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",flag: true,},{id: "0003",date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",flag: false,},{id: "0004",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: false,},{id: "0005",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: true,},{id: "0006",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: true,},{id: "0007",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: false,},{id: "0008",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: true,},{id: "0009",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: false,},{id: "0010",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: false,},{id: "0011",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: false,},{id: "0012",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: true,},],};},created() {// 默认选中this.defalutHandle()},methods: {// 默认选中defalutHandle() {this.$nextTick(() => {this.list.forEach((row) => {if (row.flag) {this.$refs.table.toggleRowSelection(row);}});});},// 单击选中行数据 clickRow(row) {this.$refs.table.toggleRowSelection(row);},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map((item) => item.id);console.log(this.ids, '选中的列表的id所组成的数组')},// 保存选中的数据编号getRowKey(row) {return row.id;},// 分页相关handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageSize = val;},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum = val;},//保存submit() {console.log(this.ids, '选中的列表的id所组成的数组')},//重置reset() {// 清除复选框this.$refs.table.clearSelection()},},
};
</script><style scoped>
.app-container {width: 100%;
}.table-box {margin-bottom: 20px;
}.button-box {margin-top: 20px;margin-bottom: 20px;
}
</style>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/596796.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【http和https】 简单入门了解

我将从以下几个方面介绍HTTP和HTTPS协议&#xff0c;并通过示例来说明它们的工作原理。 一、HTTP协议 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是互联网上应用最广泛的一种网络协议。它是一种请求/响应协议&#xff0c;用于从服务器传输超文本到客户端。 H…

JDK10新特性之var 关键字:局部变量的类型推断

在 JDK 10 中&#xff0c;Java 引入了一个重要的新特性&#xff1a;var 关键字&#xff0c;用于局部变量的类型推断。这个特性是 Java 语言对类型推断能力的扩展&#xff0c;主要目的是减少编写明确类型声明的需要&#xff0c;从而使代码更加简洁易读。下面详细解释这个特性&am…

【Redux】自己动手实现redux-thunk

1. 前言 在原始的redux里面&#xff0c;action必须是plain object&#xff0c;且必须是同步。而我们经常使用到定时器&#xff0c;网络请求等异步操作&#xff0c;而redux-thunk就是为了解决异步动作的问题而出现的。 2. redux-thunk中间件实现源码 function createThunkMidd…

【Python机器学习】k近邻——k近邻分类

k-NN算法最简单的版本是只考虑一个最近邻&#xff0c;也就是想要预测的数据点最近的训练数据点&#xff0c;预测结果就是这个训练数据点的已知输出。 除了仅考虑最近邻&#xff0c;还可以考虑任意&#xff08;k个&#xff09;邻居&#xff0c;这也是k近邻算法名字的由来。在考…

1、docker常用技巧:docker数据位置更改

目录 &#x1f345;点击这里查看所有博文 随着自己工作的进行&#xff0c;接触到的技术栈也越来越多。给我一个很直观的感受就是&#xff0c;某一项技术/经验在刚开始接触的时候都记得很清楚。往往过了几个月都会忘记的差不多了&#xff0c;只有经常会用到的东西才有可能真正记…

【React】03-关于React state(状态) 的实践

背景 在学习React组件的过程中&#xff0c;发现state的运用很广泛&#xff0c;但对于它的使用及运行机制还是比较模凌两可的&#xff0c;故找了一些资料学习一下。 实践 React中的组件类型被分为了两类&#xff1a;函数组件&#xff0c;又被称为无状态组件&#xff1b;类组件…

1*2*3+3*4*5+...+99*100*101python,1加到100的程序算法python

大家好&#xff0c;本文将围绕python中123一直加到100程序怎么写展开说明&#xff0c;计算123456...100的值python是一个很多人都想弄明白的事情&#xff0c;想搞清楚计算1-23-45 … -100的值python需要先了解以下几个事情。 今天下午上python课的时候&#xff0c;老师留了一个…

python基础教程二(列表相关知识)

列表 列表定义及其相关内置函数 列表类似一个可以改变的数组&#xff0c;里边的类型不同于c&#xff0c;c要求类型必须相同&#xff0c;列表的元素任意类型都可以&#xff0c;最重要的是列表可以改变&#xff0c;和元组和字符串最大区别 list函数&#xff1a;将别的序列元素变…

佳能G3800彩色喷墨多功能一体打印机报5B00错误代码处理方法

5B00错误代码的含义 5B00错误代码是指佳能G3800打印机的“废墨仓已满”。这个废墨仓是打印机内部的一个部件&#xff0c;主要用于收集打印过程中产生的废墨。当废墨仓已满时&#xff0c;打印机就会报5B00错误代码。 佳能G3800彩色喷墨多功能一体打印机报5B00错误代码处理办法 …

大数据 MapReduce是什么?

在Hadoop问世之前&#xff0c;其实已经有了分布式计算&#xff0c;只是那个时候的分布式计算都是专用的系统&#xff0c;只能专门处理某一类计算&#xff0c;比如进行大规模数据的排序。 很显然&#xff0c;这样的系统无法复用到其他的大数据计算场景&#xff0c;每一种应用都…

大数据技术与应用开发赛项笔记

各种启动命令 修改mysql数据库编码&#xff1a;alter database shtd_result CHARACTER SET utf8; hadoop : start-all.sh hive服务&#xff1a; hive --service metastore hive 客户端 &#xff1a;hive dolphinscheduler服务&#xff1a;./bin/dolphinscheduler-daemon.sh sta…

【算法刷题】## 算法题目第1讲:双指针处理数组题目 带视频讲解

算法题目第一讲&#xff1a;双指针处理数组题目 解决力扣&#xff1a; [344. 反转字符串][167. 两数之和 II - 输入有序数组][26. 删除有序数组中的重复项][27. 移除元素][283. 移动零][5. 最长回文子串] 配合b站视频讲解食用更佳:https://www.bilibili.com/video/BV1vW4y1P…

傻傻”的JAVA编译器

故事是从一个问题开始的&#xff1a;为什么 Java 中 2 * (i * i) 比 2 * i * i更快&#xff1f; 猛地一看&#xff0c;我还以为有人在钓鱼&#xff0c;这俩玩意不应该是一模一样吗&#xff1f;第二反应是计算结果溢出了int值所以导致了这个差异&#xff0c;于是我掏出JMH这个利…

什么是系统设计 – 学习系统设计

系统设计被定义为为系统的不同组件、接口和模块创建架构并提供有助于在系统中实现这些元素的相应数据的过程。系统设计是任何分布式系统设计背后的核心概念。 系统设计涉及识别数据源&#xff0c;它是描述、创建和规划框架以满足特定业务的必要性和先决条件的直觉。 为什么要…

excel公式名称管理器

1.问题 在日常使用excel的时候&#xff0c;发布一个表格文件&#xff0c;需要限制表格的某列或某行只能从我们提供的选项中选择&#xff0c;自己随便填写视为无效&#xff0c;如下图所示&#xff0c;上午的行程安排只能从"在岗"、"出差"、"病假"…

java面试汇总

JVM内存模型与Java线程内存模型的区别 JVM内存模型描述的是Java虚拟机在执行Java程序时如何管理和使用内存&#xff0c;主体围绕&#xff1a;方法区&#xff08;Method Area&#xff09;、堆&#xff08;Heap&#xff09;、程序计数器&#xff08;Program Counter Register&am…

AI绘图模型不会写字的难题解决了

介绍 大家好&#xff0c;最近有个开源项目比较有意思&#xff0c;解决了图像中不支持带有中文的问题。 https://github.com/tyxsspa/AnyText。 为什么不能带有中文&#xff1f; 数据集局限 Stable Diffusion的训练数据集以英文数据为主&#xff0c;没有大量包含其他语言文本的…

LeetCode-141环形链表 LeetCode-142环形链表二

一、前言 本篇文章在我之前讲完的链表、链表与递归的基础上进行讲解&#xff0c;本次我们以leetcode为例&#xff0c;讲解链表的其他题型&#xff0c;今天我们先了解一下环形链表&#xff0c;这里我们以leetCode141和leetCode142为例。 二、LeetCode141 首先关于这道题&#…

微服务注册中心之Eureka

微服务注册中心之Eureka eureka 搭建集群 版本说明 Spring Boot 2.1.7.RELEASE spring-cloud-starter-netflix-eureka-server Finchley.SR2 spring-boot-starter-security 2.1.7.RELEASE pom.xml 文件 <?xml version"1.0" encoding"UTF-8"?> &l…

游戏缺少emp.dll详细修复教程,快速解决游戏无法启动问题

在现代游戏中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“emp.dll丢失”。emp.dll是一个动态链接库文件&#xff0c;它包含了许多程序运行所需的函数和数据。当一个程序需要调用这些函数时&#xff0c;系统会从emp.dll文件中加载相应的内容。因此&#x…