element Table实现翻页多选和多选数据双向绑定

news/2024/7/10 1:38:16 标签: 前端, vue, elementui

参考资料:el-table、element Table使用toggleRowSelection添加默认值不生效的原因与解决方法
说明:

  • el-table设置row-key用于翻页绑定
  • el-table toggleRowSelection方法用于切换选中项状态
<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
    row-key="id"
    >
    <el-table-column
      type="selection"
      width="55">
    </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-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        selectedData:[]
      }
    },
     methods: {
     	// 多选项值变化的时候同步到selectedData
     	handleSelectionChange(val){
     		this.selectedData = val;
     	},
     	// selectedData中的值发生变化时同步到选中项
     	handleSelectedDataChange(){
     		this.selectedData.length && this.selectedData.forEach((item)=>{
     		const row = this.tableData.find((i) => i.id === item.id);
            this.$refs.multipleTable.toggleRowSelection(row); 		
         })
       }
    },
  }
</script>

http://www.niftyadmin.cn/n/376445.html

相关文章

C语言:二维数组的传递

目录 一、从本质了解二维数组 二、访问二维数组的方式 1、指向元素的指针 2、指向每一行的指针&#xff08;指针数组&#xff09; 3、指向整个数组的指针&#xff08;数组指针&#xff09; 三、3种二维数组的形参声明方式 1、数组法 2、数组指针法 3、指针法 在实践工程项目中&…

NR RLC(四) AM mode

欢迎关注同名微信公众号“modem协议笔记”。 这篇是RLC AM mode的相关内容&#xff0c;RLC的ARQ是一种重传机制&#xff0c;其实NR三个不同的协议层MAC(HARQ)、 RLC(ARQ)和PDCP都有重传功能。为什么三层协议都需要具备重传功能&#xff1f;早期也有思考过这个问题&#xff0c;…

游戏研发项目管理

基于阶段模式进行游戏新产品研发过程&#xff0c;以及基于这种研发过程Leangoo 领歌提供的项目模板。 二、游戏产品开发流程 通常开发一款新游戏大体上会按照如下流程来进行&#xff1a; 1&#xff09; 概念阶段 – Concept 主策根据产品创意&#xff0c;确定游戏策划草案&a…

JVM之类的初始化与类加载机制

类的初始化 clinit 初始化阶段就是执行类构造器方法clinit的过程。此方法不需定义&#xff0c;是javac编译器自动收集类中的所有类变量的赋值动作和静态代码块中的语句合并而来。构造器方法中指令按语句在源文件中出现的顺序执行。clinit不同于类的构造器。(关联&#xff1a;…

Linux中与中断相关的内核数据结构

【摘要】本文树妖详细讲解了Linux中与中断相关的内核数据结构及其内部联系。 八、中断相关的数据结构 8.1 irq_desc 用于表示IRQ描述符的结构定义如下&#xff1a;\linux-2.6.32.63\include\linux\irq.h struct irq_desc {unsigned int irq; //中断号unsigned int …

一起学SF框架系列4.5-模块context-AbstractRefreshableApplicationContext

AbstractRefreshableApplicationContext继承于AbstractApplicationContext&#xff0c;主要实现BeanFactory刷新&#xff08;含初始化&#xff09;。 类作用 1、在基类AbstractApplicationContext多次调用refresh()时&#xff0c;本类负责每次都创建一个新的内部 bean 工厂实…

34 KVM管理设备-管理虚拟磁盘

文章目录 34 KVM管理设备-管理虚拟磁盘34.1 概述34.2 操作步骤 34 KVM管理设备-管理虚拟磁盘 34.1 概述 虚拟磁盘类型主要包含virtio-blk、virtio-scsi、vhost-scsi等。virtio-blk模拟的是一种block设备&#xff0c;virtio-scsi和vhost-scsi模拟的是一种scsi设备。 virtio-b…

WebStorm 利用 FileWatchers 实现 JS、CSS 压缩

WebStorm 利用 FileWatchers 实现 JS、CSS 压缩 合理的使用 JS、CSS 压缩可以大大缩减文件的大小&#xff0c;使网页加载速度更快一些&#xff08;虽然对我来说意义不大&#xff0c;因为我不做前端。。。&#xff09;。 为什么会有这篇文章&#xff0c;是因为在做一些 JS 逆向…