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

方法:

创建一个空数组用来存放默认数据

遍历表格的数据,再遍历需要在表格中反显的数据,两者的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)

})

}

相关推荐
Y425812 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
速易达网络15 小时前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou15 小时前
js前端this指向规则
开发语言·前端·javascript
lichong95115 小时前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
cai_huaer15 小时前
BugKu Web渗透之 cookiesWEB
前端·web安全
lichong95115 小时前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
友友马16 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱16 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌16 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静17 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能