Element-ui el-table组件单选/多选/跨页勾选讲解

文章目录

  • 一、el-table介绍
  • 二、el-table单选
  • 三、el-table多选
  • 四、el-table跨页勾选
  • 五、热门文章

一、el-table介绍

el-table 是 Element UI(一个基于 Vue.js 的高质量 UI 组件库)中的一个组件,用于展示表格数据。通过 el-table,你可以很方便地创建具有多种功能(如排序、筛选、分页等)的表格。

el-table 使用示例:

<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小狮',address: '上海市普陀区金沙江路 1517 弄'}, {// ...其他数据}]}}
}
</script>

在上面的示例中:

  • el-table 是表格的根组件,通过 :data 属性绑定要展示的数据(这里是一个数组)。
  • el-table-column 是表格列的组件,用于定义表格的每一列。
    • prop 属性指定了每一列对应的数据字段。
    • label 属性指定了列的标题。
    • width 属性(可选)用于指定列的宽度。

Element UI 的 el-table 组件提供了许多其他的功能和配置选项,如分页、排序、筛选、行展开、自定义模板等,你可以根据需要进一步了解和使用它们。

二、el-table单选

Table 组件提供了单选的支持,只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件,它会传入currentRow,oldCurrentRow。如果需要显示索引,可以增加一列el-table-column,设置type属性为index即可显示从 1 开始的索引号。

<template><el-tableref="singleTable":data="tableData"highlight-current-row@current-change="handleCurrentChange"style="width: 100%"><el-table-columntype="index"width="50"></el-table-column><el-table-columnproperty="date"label="日期"width="120"></el-table-column><el-table-columnproperty="name"label="姓名"width="120"></el-table-column><el-table-columnproperty="address"label="地址"></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="setCurrent(tableData[1])">选中第二行</el-button><el-button @click="setCurrent()">取消选择</el-button></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 弄'}],currentRow: null}},methods: {setCurrent(row) {this.$refs.singleTable.setCurrentRow(row);},handleCurrentChange(val) {this.currentRow = val;}}}
</script>

三、el-table多选

在 Element UI 的 el-table 组件中实现列表勾选选择(即多选功能),你需要使用 type="selection"el-table-column,并且监听 selection-change 事件。但如果你希望用户能够明确地选择多行(而不是单选),你通常不需要做任何特殊设置,因为 type="selection" 默认就是用于多选的。

el-table 列表勾选选择的示例:

<template><el-table:data="tableData"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '王小狮',address: '上海市普陀区金沙江路 1517 弄'},// ...其他数据],multipleSelection: [] // 用于存储选中行的数组};},methods: {handleSelectionChange(val) {// val 是一个包含选中行数据的数组this.multipleSelection = val;console.log('当前选中项', val);}}
};
</script>

在这个示例中:

  • el-table-columntype 属性设置为 "selection" 来启用勾选选择。
  • @selection-change="handleSelectionChange" 监听选择变化事件,并将选中的行数据数组作为参数传递给 handleSelectionChange 方法。
  • handleSelectionChange 方法接收一个数组 val,它包含了所有当前被勾选(选中)的行数据。
  • multipleSelection 数据属性用于在组件内部存储当前选中的行数据,但这并不是必须的,你可以根据需要在 handleSelectionChange 方法中直接处理这些数据。

四、el-table跨页勾选

在 Element UI 的 el-table 组件中实现跨页勾选功能,需要确保在分页时能够保留之前页面的选择状态。这通常涉及到在表格组件上设置一些特定的属性和监听事件,并结合后端分页接口的数据处理。

以下是实现 el-table 跨页勾选功能的基本步骤:

  1. 添加 row-key 属性:在 el-table 上设置 row-key 属性,该属性用于指定表格中每一行的唯一标识符,通常可以是行数据的某个唯一字段(如 ID)。
<el-table :row-key="getRowKey" ...>...
</el-table>

在 Vue 实例的 methods 中定义 getRowKey 方法:

methods: {getRowKey(row) {return row.id; // 假设每行数据都有一个唯一的 id 字段}
}
  1. 设置 reserve-selection 属性:在 el-table-columntype="selection" 上设置 reserve-selection 属性为 true,这将使得在分页时能够保留之前的选择状态。
<el-table-column type="selection" reserve-selection ...>
</el-table-column>
  1. 处理分页数据:确保后端分页接口返回的数据包含之前页面选中行的状态信息。这通常需要在后端进行实现,使得在每次请求新的分页数据时,后端能够知道哪些行是之前被选中的。
  2. 监听 selection-change 事件:在 el-table 上监听 selection-change 事件,并在事件处理函数中更新当前选中的行数据。这通常用于在前端维护一个表示当前选中行数据的数组。
<el-table ... @selection-change="handleSelectionChange">...
</el-table>

在 Vue 实例的 methods 中定义 handleSelectionChange 方法:

methods: {handleSelectionChange(val) {this.multipleSelection = val; // 更新当前选中的行数据数组// 可以在这里进行其他操作,如向后端发送更新选中状态的请求等}
}
  1. 注意事项
  • 如果后端分页接口不支持跨页勾选功能,你可能需要在前端自行实现一种机制来跟踪和保存选中状态。例如,可以使用浏览器的 localStorage 或 Vuex 等状态管理库来保存选中状态。
  • 当用户切换页面或进行其他可能改变表格数据的行为时,需要确保之前的选择状态被正确地保留和恢复。这可能需要你在 Vue 组件的生命周期钩子(如 createdmountedupdated 等)中进行一些额外的处理。

完整代码

<template>  <div>  <el-pagination  @current-change="handlePageChange"  :current-page="currentPage"  :page-size="pageSize"  layout="prev, pager, next"  :total="totalItems"  ></el-pagination>  <el-table  :data="tableData"  style="width: 100%"  @selection-change="handleSelectionChange"  row-key="id"  >  <el-table-column  type="selection"  reserve-selection  ></el-table-column>  <el-table-column  prop="date"  label="日期"  width="180"  ></el-table-column>  <el-table-column  prop="name"  label="姓名"  width="180"  ></el-table-column>  <!-- 其他列 -->  </el-table>  </div>  
</template>  <script>  
export default {  data() {  return {  currentPage: 1, // 当前页码  pageSize: 10, // 每页显示数量  totalItems: 0, // 总数据条数,从后端接口获取  tableData: [], // 当前页数据  selectedRows: [], // 所有选中的行数据,用于跨页保存状态  };  },  created() {  this.fetchData(); // 初始化时加载第一页数据  },  methods: {  // 加载数据的函数(需要调用后端接口)  fetchData() {  // 假设你有一个 fetchTableData 函数,用于从后端获取分页数据  // 这里需要传入当前页码和每页显示数量,并返回数据  // 同时,这个函数还需要处理后端返回的总数据条数 totalItems  this.fetchTableData(this.currentPage, this.pageSize)  .then(response => {  this.totalItems = response.total; // 更新总数据条数  this.tableData = response.data; // 更新当前页数据  // 如果后端支持跨页勾选,还需要处理 selectedRows  // 例如,从 response 中获取之前选中的行 ID,然后筛选出对应的行数据放入 selectedRows  })  .catch(error => {  // 处理错误  });  },  handlePageChange(val) {  this.currentPage = val;  this.fetchData(); // 切换页码时重新加载数据  },  handleSelectionChange(val) {  // val 是当前页选中的行数据数组  // 这里需要处理跨页选中的逻辑  // 你可以将 val 与 selectedRows 进行合并、去重等操作  // 并将最终的结果赋值给 selectedRows  this.selectedRows = val; // 简化的示例,实际中可能需要更复杂的逻辑  // 你还可以选择将 selectedRows 发送到后端进行保存(如果需要的话)  },  // 假设的 fetchTableData 函数(你需要根据后端接口来实现)  fetchTableData(page, size) {  // 发送请求到后端获取数据,并返回 Promise  },  },  
};  
</script>

五、热门文章

  1. 【温故而知新】vue运用之探讨下单页面应用(SPA)与多页面应用(MPA)
  2. 【温故而知新】探讨下对vue的mixin的理解
  3. 【温故而知新】vue修饰符有哪些
  4. 【温故而知新】vue组件间通信的实现方式
  5. draggable实现拖拽、禁止拖拽、拖拽后元素重新排序到指定位置
  6. router路由按需加载
  7. vue页面导出Word文档(含图片)
  8. Vue拖拽组件awe-dnd
  9. el-tabs事件绑定(Element UI)

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

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

相关文章

QT设计模式:模板模式

基本概念 模板模式&#xff08;Template Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了一个操作中的算法的模板&#xff0c;而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重新定义该算法的某些特定步骤。 实现的模块有&#xff1…

AI智能分析高精度烟火算法EasyCVR视频方案助力打造森林防火建设

一、背景 随着夏季的来临&#xff0c;高温、干燥的天气条件使得火灾隐患显著增加&#xff0c;特别是对于广袤的森林地区来说&#xff0c;一旦发生火灾&#xff0c;后果将不堪设想。在这样的背景下&#xff0c;视频汇聚系统EasyCVR视频融合云平台AI智能分析在森林防火中发挥着至…

广告归因数据回传:打造低成本、高ROI的oCPX模型

优化成本、提升转化&#xff0c;这一直是App效果广告买量投放的两大核心目标。广告归因中的数据回传正是因此而生&#xff0c;在投放oCPX类智能出价时&#xff0c;通过数据回传&#xff0c;数据算法不断对模型进行调优&#xff0c;广告投放机器人就会变得更加地聪明和智能&…

计算机答辩常见问题汇总(一)

答辩过程中&#xff0c;老师问的问题一般都和你的设计有关&#xff0c;特别是设计中的一些关键技术&#xff0c;比如&#xff1a; 数据库链接方式&#xff0c;数据库设计中的 ER 图、范式等。一般不会太难&#xff0c;都是一些学过的知识。 用到的所有概念都了解&#xff08;…

鸿蒙原生应用元服务开发-Web相关说明

Web组件用于在应用程序中显示Web页面内容&#xff0c;为开发者提供页面加载、页面交互、页面调试等能力。 页面加载&#xff1a;Web组件提供基础的前端页面加载的能力&#xff0c;包括加载网络页面、本地页面、Html格式文本数据。 页面交互&#xff1a;Web组件提供丰富的页面交…

css 子元素 圆 均匀分布 展开动画

一般情况下使用scss就可以实现 import "math";#app {display: flex;align-items: center;justify-content: center;width: 200px;height: 200px;position: relative;border-radius: 50%;border: 1px solid #000;> span {position: absolute;display: flex;align-…

什么是HTTP/2?

HTTP/2&#xff08;原名HTTP 2.0&#xff09;即超文本传输协议第二版&#xff0c;使用于万维网。HTTP/2主要基于SPDY协议&#xff0c;通过对HTTP头字段进行数据压缩、对数据传输采用多路复用和增加服务端推送等举措&#xff0c;来减少网络延迟&#xff0c;提高客户端的页面加载…

Java数组(如果想知道Java中有关数组的知识点,那么只看这一篇就足够了!)

前言&#xff1a;数组对于每一门编程语言来说都是重要的数据结构之一&#xff0c;当然不同语言对数组的实现及处理也不尽相同,Java 语言中提供的数组是用来存储固定大小的同类型元素。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSD…

PixelYourSite PRO插件下载:提升网站性能与用户体验的终极解决方案

在数字时代&#xff0c;网站的性能和用户体验是企业成功的关键。PixelYourSite PRO插件是专为WordPress网站设计的一款高效工具&#xff0c;旨在通过先进的像素管理和优化技术&#xff0c;提升网站加载速度&#xff0c;增强用户互动&#xff0c;从而显著提高转化率。 一、为什…

智慧便民小程序源码系统 求职招聘+房产出租+相亲交友 带完整的安装代码包以及系统搭建教程

在数字化、智能化的今天&#xff0c;我们的生活节奏越来越快&#xff0c;对于各种服务的需求也越发多元化和个性化。为了满足广大市民对于便捷、高效、全面的服务需求&#xff0c;罗峰给大家分享一款智慧便民小程序源码系统&#xff0c;集求职招聘、房产出租、相亲交友三大功能…

深入理解指针(4)

目录 1. 字符指针变量2. 数组指针变量2.1 数组指针变量是什么&#xff1f;2.2 数组指针变量怎么初始化 3. ⼆维数组传参的本质4. 函数指针变量4.1 函数指针变量的创建4.2 函数指针变量的使⽤4.3 两段有趣的代码4.3.1 typedef 关键字 5. 函数指针数组6. 转移表 1. 字符指针变量 …

Redis7降级到Redis6如何AOF备份恢复(错的)

Redis7降级到Redis6如何AOF备份恢复&#xff08;错的&#xff09; 前提&#xff1a;从始至终开启AOF 介绍的Docker安装的Redis&#xff0c;不是Docker也一样&#xff0c;差不多 一、data目录差异 redis版本7 - /data/appendonlydir - appendonly.aof.manifest - appendo…

条件变量详解

概述 条件变量是限制线程执行的一种机制&#xff0c;即在某些条件满足之前限制线程的执行。这种限制的目的&#xff0c;大多是为了减少线程之间信息闭塞&#xff0c;达到线程同步&#xff0c;从而提高线程之间的通信效率。 线程中访问共享数据的代码常常带有一定的逻辑顺序&a…

处理解决python

1、问题现象&#xff1a; ModuleNotFoundError: No module named pkg_resources 2、解决方案 安装pip install setuptools即可解决&#xff1a;

Windows环境下VSCode C无法跳转自动补全

前言&#xff1a; 本文记录了自己在配置 Windows环境下 VSCode C开发环境的遇到的问题和解决方法。 参考: vscode c语言没有代码提示_clangd提示不生效-CSDN博客 VSCODE无法跳转_vscode 不能跳转-CSDN博客 vscode c/c环境配置&#xff08;MinGW&#xff09;调用第三官方库…

华为OD机试 - 反射计数 - 矩阵(Java 2024 C卷 200分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

Vulstack红队评估(一)

文章目录 一、环境搭建1、网络拓扑2、web服务器(win7)配置3、域控&#xff08;winserver2008&#xff09;配置4、域内机器&#xff08;windows 2003&#xff09;配置5、调试网络是否通常 二、web渗透1、信息搜集2、端口扫描3、目录扫描4、弱口令5、phpmyadmin getshell日志gets…

OBS插件--声音波形显示

声音波形显示 波形显示是一个可以定制化的动态音频频谱图案&#xff0c;可以多音频进行可视化&#xff0c;对于音乐类主播必不可少&#xff0c;通过灵活的配置选项可以设计出非常个性化的频谱图形。 下面截图演示下操作步骤&#xff1a; 首先&#xff0c;打开 OBS直播助手 在…

探索生命奥秘的新征程:谷歌AlphaFold 3发布!

大家好&#xff01;今天和大家分享的是让人热血沸腾的消息——谷歌AlphaFold 3的发布&#xff01;这次的新版本可不仅仅是一次升级&#xff0c;而是一次生物科技的革命&#xff01; 回顾一下AlphaFold系列的历程&#xff0c;从AlphaFold 1的问世到AlphaFold 2的惊艳登场&#…

ChatGPT Web Midjourney一键集成最新版

准备工具 服务器一台 推荐使用浪浪云服务器 稳定 安全 有保障 chatgpt api 推荐好用白嫖的api 项目演示 项目部署 浏览器访问casaos 添加软件原添加 https://gitee.com/langlangy_1/CasaOS-AppStore-LangLangy/raw/master/chatmjd.zip 安装此软件 等待安装 安装后再桌面设置…