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,一经查实,立即删除!

相关文章

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

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

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;老师留了一个…

佳能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…

excel公式名称管理器

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

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…

VSCode上远程调试代码出现的问题

记录一下&#xff1a; 真的是汗流浃背了&#xff0c;师妹叫帮忙如何在VSCode上远程调试代码&#xff0c;一些自己已经经历过的问题&#xff0c;现在已经忘记了。又在网上一顿搜索&#xff0c;这次记录下吧。。。 出现以下问题&#xff1a; 1. 终端界面总是sh-4.4 $ &#xff…

LINUX加固之命令审计

一、前言 在LINUX安全范畴中&#xff0c;安全溯源也是很重要的一个环节。对主机上所有曾操作过的命令详细信息需要有一份记录保存&#xff0c;当系统遭受破坏或者入侵&#xff0c;拿出这份记录&#xff0c;可以帮助定位一些可疑动作。 很多系统通常都会配置安全堡垒机&#xff…

jmeter断言-三种

1.响应断言 substring是指包含就行 不用完全相等 2.json断言 3.持续时间断言

Consule安装与SpringBoot集成

Consule Consul 是由 HashiCorp 开发的一款软件工具&#xff0c;提供了一组功能&#xff0c;用于服务发现、配置管理和网络基础设施自动化。它旨在帮助组织管理现代分布式和微服务架构系统的复杂性。以下是Consul的一些关键方面和功能&#xff1a; 服务发现&#xff1a;Consul…

2024第一篇: 架构师成神之路总结,你值得拥有

大家好&#xff0c;我是冰河~~ 很多小伙伴问我进大厂到底需要怎样的技术能力&#xff0c;经过几天的思考和总结&#xff0c;终于梳理出一份相对比较完整的技能清单&#xff0c;小伙伴们可以对照清单提前准备相关的技能&#xff0c;在平时的工作中注意积累和总结。 只要在平时…

【DevOps-02】Code编码阶段工具

一、简要说明 在code阶段,我们需要将不同版本的代码存储到一个仓库中,常见的版本控制工具就是SVN或者Git,这里我们采用Git作为版本控制工具,GitLab作为远程仓库。 Git安装安装GitLab配置GitLab登录账户二、Git安装 Git官网 Githttps://git-scm.com/

重新定义出行,PIX移动空间-Robobus2.0正式发布

PIX从创始之初就以重塑城市作为愿景&#xff0c;基于对未来终局的思考&#xff0c;我们重新定义了下一代汽车–移动空间&#xff0c;汽车不再只是一个交通工具&#xff0c;而是一个个提供服务的移动空间&#xff0c;这也将最终重塑城市&#xff0c;使城市成为一个真正的超级有机…

正定矩阵在格密码中的应用(知识铺垫)

目录 一. 写在前面 二. 最小值点 三. 二次型结构 四. 正定与非正定讨论 4.1 对参数a的要求 4.2 对参数c的要求 4.3 对参数b的要求 五. 最小值&#xff0c;最大值与奇异值 5.1 正定型&#xff08;positive definite&#xff09; 5.2 负定型&#xff08;negative defin…

【MySQL】字符集与排序规则

在MySQL数据库中&#xff0c;字符集&#xff08;Character Set&#xff09;和排序规则&#xff08;Collation,也称字符集校验规则&#xff09;是重要的概念&#xff0c;它们对于正确存储和比较数据至关重要。 字符集与排序规则 字符集是一组字符的集合&#xff0c;与数字编码…

8个流行的Python可视化工具包,你喜欢哪个?

用 Python 创建图形的方法有很多&#xff0c;但是哪种方法是最好的呢&#xff1f;当我们做可视化之前&#xff0c;要先明确一些关于图像目标的问题&#xff1a;你是想初步了解数据的分布情况&#xff1f;想展示时给人们留下深刻印象&#xff1f;也许你想给某人展示一个内在的形…