饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤

简介: 饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤
正常情况下,在一个后台管理系统中,都会有勾选选中功能,也都会有翻页功能。本文记录一下,比较常见的翻页勾选保留功能和翻页序号递增功能的实现方式步骤

翻页勾选保留功能

第一步和第二步

<template>
  <div id="box">
    <!-- 
      第二步:指定一个key去确认标识这一行的数据,因为若要翻页保留,就需要确认保留的数据是哪一个,
             所以我们就给每一行确定个独一无二的身份标识,这里我们在el-table标签上
             使用row-key去得到每一行的身份标识
     -->
    <el-table
      :row-key="getRowKey"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 
        第一步:开启选中翻页保留模式 即::reserve-selection="true" 
               默认是false。即 默认选中翻页不保留之前勾选的数据
      -->
      <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="home" label="家乡住址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

第三步

methods: {
 /*
      第三步,一般我们都是用id作为每一行数据的特殊标识,所以这里返回的是row下面的id作为标识。当然
             这里不return row下面的id也行,只要能够确保某个字段是独一无二的,不会重复的,就可return
             return row下面的这个字段也是可以的
    */
    getRowKey(row) {
      console.log("看看每一行的数据", row);
      return row.id;
    },
  }

翻页序号递增功能

翻页序号递增功能不像翻页勾选保留功能那样还需要每一条数据做标识,而是通过计算得出来的。

第一步

<!-- 序号列:index绑定计算方法indexMethod
 -->
  <el-table-column
    :index="indexMethod"
    label="序号"
    type="index"
    width="50"
    fixed
  >
  </el-table-column>

第二步

methods: {
  // 序号翻页递增
    indexMethod(index) {
      console.log('索引数下标',index)
      let nowPage = this.tablePages.pageIndex; //当前第几页,根据组件取值即可
      let nowLimit = this.tablePages.pageSize; //当前每页显示几条,根据组件取值即可
      return index + 1 + (nowPage - 1) * nowLimit ; // 这里可以理解成一个公式
    },
  }
好记性不如烂笔头,记录一下吧
相关文章
|
6月前
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
354 2
|
7月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
201 0
|
7月前
|
图形学
小功能⭐️Unity获取点击到的UI
小功能⭐️Unity获取点击到的UI
|
7月前
|
图形学
小功能⭐️Unity判断是否单击到了UI
小功能⭐️Unity判断是否单击到了UI
|
7月前
|
图形学
小功能⭐️不用传参,Unity获得鼠标悬浮处的物体、UI!
小功能⭐️不用传参,Unity获得鼠标悬浮处的物体、UI!
|
7月前
|
图形学
小功能⭐️解决Unity 3D UI遮挡穿透问题
小功能⭐️解决Unity 3D UI遮挡穿透问题
|
7月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
123 0
|
8月前
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
172 0
|
8月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
540 0
|
8月前
|
前端开发
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
270 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
  • 3
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 4
    如何在React.js中使用Shadcn/UI
  • 5
    移动端UI名词 - AxureMost
  • 6
    unity判断鼠标在不在UI上
  • 7
    Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
  • 8
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
  • 9
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
  • 10
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 1
    如何在React.js中使用Shadcn/UI
    73
  • 2
    Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
    88
  • 3
    WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
    18
  • 4
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
    33
  • 5
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    29
  • 6
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
    34
  • 7
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
    92
  • 8
    unity判断鼠标在不在UI上
    58
  • 9
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    83
  • 10
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    163