elementui实现表格(el-table)默认选中

news/2024/10/23 9:27:36/

方法:
创建一个空数组用来存放默认数据
遍历表格的数据,再遍历需要在表格中反显的数据,两者的id一致(两者之间共同的标识即可,一般以id做判断)
把判断出来的默认表格数据push到创建的数组中
再遍历数组,将数据放入方法中
实现代码
HTML部分

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
</template>


JS部分

//创建一个空数组用来存放默认数据
let list = []
//遍历表格的数据,再遍历需要在表格中反显的数据,两者的id一致
this.tableData.forEach((item) => {
     this.tableList.forEach(val => {
         if (val.id=== item.id) {
             // 把判断出来的默认表格数据push到创建的数组中
             list.push(item)
         }
    })
 })
 if (list) {
     //再遍历数组,将数据放入方法中
     list.forEach((row) => {
       this.$refs.multipleTable.toggleRowSelection(row, true)
     })
 }
 


http://www.ppmy.cn/news/1123301.html

相关文章

5、SpringBoot_热部署

六、热部署 1.热部署概述 概述&#xff1a;程序更改后&#xff0c;不需要重新启动服务器也能够实现动态更新 springboot 项目如何实现热部署&#xff1f; tomcat 已经内置到项目容器中了希望tomcat监听外部程序变化通过新建一个程序来监控你代码的变化 2.依赖导入 依赖 <…

爬虫获取接口数据

上一讲讲的是获取静态网页数据的教程&#xff0c;适用于我们要爬取的数据在网页源代码中出现&#xff0c;但是还是有很多的数据是源代码中没有的&#xff0c;需要通过接口访问服务器来获得&#xff0c;下面我就来讲讲如何爬取这类数据。 以巨潮资讯网爬取比亚迪企业年报为例。…

五、数学建模之层次分析法

1.概念 2.例题 一、概念 1.提出 层次分析法&#xff08;Analytic Hierarchy Process&#xff0c;AHP&#xff09;是一种多标准决策分析方法&#xff0c;用于帮助人们在面对复杂的决策问题时进行定量和定性的比较和评估。它最初由美国运筹学家和管理学家托马斯萨蒙&#xff08…

PyCharm 手动下载插件

插件模块一直加载失败&#xff0c;报错信息&#xff1a; Marketplace plugins are not loaded. Check the internet connection and refresh. 尝试了以下方法&#xff0c;均告失败&#xff1a; pip 换源Manage Plugin Repositories...HTTP 代理设置...关闭三个防火墙 最后选…

go sync.Map包装过的对象nil值的判断

被sync.Map包装过的nil 对象&#xff0c;是不能直接用if xxx nil的方式来判断的 func testnil() *interface{} {return nil }func main() {var ptr *interface{}test : testnil()//p &Person{}fmt.Printf("ptr 的值为 : %v\n", ptr)fmt.Printf("ptr 的值…

LeetCode 75-02:字符串的最大公因子

前置知识&#xff1a;使用欧几里得算法求出最大公约数 func gcdOfStrings(str1 string, str2 string) string {if str1str2 ! str2str1 {return ""}return str1[:gcd(len(str1), len(str2))] }func gcd(a, b int)int{if b 0{return a}return gcd(b, a%b) }

前端面试题记录

vue2响应式原理 vue2主要是采用了数据劫持结合发布者-订阅者模式来实现数据的响应式&#xff0c;vue在初始化的时候&#xff0c;会遍历data中的数据&#xff0c;使用object.defineProperty为data中的每一个数据绑定setter和getter&#xff0c;当获取数据的时候会触发getter&am…

php食堂点餐系统hsg5815ABA2程序-计算机毕业设计源码+数据库+lw文档+系统+部署

php食堂点餐系统hsg5815ABA2程序-(毕业设计毕设项目源代码课程设计程序设计指导xz2023) php食堂点餐系统hsg5815ABA2程序-计算机毕业设计源码数据库lw文档系统部署