element table跨分页多选及回显的实现示例

 更新时间:2022年02月23日 10:11:36   作者:妮可是条狗  
本文主要介绍了element table跨分页多选及回显的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

1.data中定义getRowKeys,记录每行的key值

getRowKeys(row) {
   return row.id;
},

2.el-table绑定getRowKeys

<el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    :row-key="getRowKeys"
>

3.将selection列的reserve-selection设为true

<el-table-column
    type="selection"
    width="50"
    align="center"
    :reserve-selection="true"
></el-table-column>

4.表格数据选中方法handleSelectionChange

handleSelectionChange(rows) {
    this.multipleSelection = rows;
    this.select_number = this.multipleSelection.length;
    this.select_Id = [];
    if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.select_Id.push(row.id);
          }
        });
    }
},

代码整理

<template>
  <div>
    <el-table @selection-change="handleSelectionChange" :row-key="getRowKeys">
      <el-table-column type="selection" width="50" align="center" :reserve-selection="true"> 
      </el-table-column>
    </el-table>
    <el-pagination>...</el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multipleSelection: [], // 表格选中
      getRowKeys(row) {//记录每行的key值
        return row.id;
      },
      select_number: "", //表格select选中的条数
      select_Id: [], //表格select复选框选中的id
    }
  },
  methods: {
    handleSelectionChange(rows) {
      this.multipleSelection = rows;
      this.select_number = this.multipleSelection.length;
      this.select_Id = [];
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.select_Id.push(row.id);
          }
        });
      }
    },
  }
}

到此这篇关于element table跨分页多选及回显的实现示例的文章就介绍到这了,更多相关element table跨分页多选及回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue实现验证码功能

    Vue实现验证码功能

    这篇文章主要为大家详细介绍了Vue实现验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue.js的computed,filter,get,set的用法及区别详解

    vue.js的computed,filter,get,set的用法及区别详解

    下面小编就为大家分享一篇vue.js的computed,filter,get,set的用法及区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 关于vue.js中实现方法内某些代码延时执行

    关于vue.js中实现方法内某些代码延时执行

    今天小编就为大家分享一篇关于vue.js中实现方法内某些代码延时执行,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue中关于computed的this指向问题

    vue中关于computed的this指向问题

    这篇文章主要介绍了vue中关于computed的this指向问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 关于vue3使用particles粒子特效的问题

    关于vue3使用particles粒子特效的问题

    这篇文章主要介绍了关于vue3使用particles粒子特效的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue3中使用setup通过ref获取子组件的属性

    Vue3中使用setup通过ref获取子组件的属性

    这篇文章主要介绍了Vue3中使用setup通过ref获取子组件的属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue3 响应式系统实现 computed

    Vue3 响应式系统实现 computed

    这篇文章主要介绍了 Vue3 响应式系统实现 computed,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下
    2022-06-06
  • 八个Vue中常用的v指令详解

    八个Vue中常用的v指令详解

    vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面这篇文章主要给大家介绍了八个Vue中常用的v指令的相关资料,需要的朋友可以参考下
    2022-04-04
  • Vue动态添加表单的实现方法

    Vue动态添加表单的实现方法

    在Vue.js应用中,动态表单是一个常见的需求,尤其是当表单字段的数量和类型需要根据用户输入或系统状态动态变化时,本文将详细介绍如何在Vue中实现动态表单的创建,并通过多个示例展示具体的实现方法,需要的朋友可以参考下
    2024-09-09
  • 详解vue-cli下ESlint 配置说明

    详解vue-cli下ESlint 配置说明

    这篇文章主要介绍了详解vue-cli下ESlint 配置说明,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论