Element-UI 默认选中 toggleRowSelection

最新推荐文章于 2025-07-04 22:30:09 发布

懒水獭

最新推荐文章于 2025-07-04 22:30:09 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/aoeace/article/details/106354730

js 专栏收录该内容

19 篇文章

订阅专栏

本文详细解析了如何在Vue框架中使用$refs和forEach方法来实现表格数据的加载和行选择功能。通过实例代码，展示了如何遍历获取到的数据，并根据CHECKED字段的状态，利用toggleRowSelection方法实现对表格行的自动选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this.$refs.tableRef.data = res.rows
this.$nextTick(() => {
  res.rows.forEach(item => {
    let checked = item.CHECKED === 1
    this.$refs.tableRef.toggleRowSelection(item,checked)
  })
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

懒水獭

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Element-ui 中table 默认选中 toggleRowSelection

飞翔༒之翼

03-30

769

这个问题在我的项目中也遇到过，我之前的博文有提到，但现在还是单独写一下的比较好，废话不多先上效果图：说明：输入以后点击回车键就请求接口，然后查出相对应的这条数据并且前面勾上，代码： this.$refs.multipleTable1.toggleRowSelection(this.workorderData.find(d => d.workSheetCode === this.wor...

element-ui表格跨页选择数据

csdn_chengpeng的博客

06-04

760

/循环数据列表，判断当前数据的id是否存在于allIds中，如果存在则默认选中。

4 条评论您还未登录，请先登录后发表或查看评论

Element 默认勾选表格 toggleRowSelection的实现

10-16

主要介绍了Element 默认勾选表格 toggleRowSelection的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Element UI 表格 type=“selection“ 默认选中

文龙刚的博客

10-10

5654

列表中含有多选功能。

vue3 获取选中的el-table行数据

最新发布

往事知多少？

07-04

617

在Vue 3中，如果你正在使用<el-table>组件（来自Element Plus或Element UI库），并希望获取被选中的行数据，你可以通过几种不同的方式来实现。

element-ui Select选择器设置默认选中

xiaoxiannv666的博客

01-29

1万+

展示效果：默认选中全部代码部分： /* 这里 lessions是一个对象 console.dir打印如下： Object 0: "全部" 1: "PF3" 2: "PF4" 3: "PF5" 4: "PF6" 5: "PF7" 6: "PF8" 7: "PF9" 1001: "PF2" 1002: "PF1" */ <el-select v-model="lessionsLevel"> <el-option v-for="(value, key, index) in lessi

Vue elementui 实现表格selection的默认勾选

gis_zhouda的博客

12-07

7311

需求：弹出一个选择框，表格有勾选框，数据填充后，某些行设置默认勾选。如下图：数据填充后默认是不勾选的，如果要勾选某些行，通过toggleRowSelection this.$refs.zttable.toggleRowSelection(this.ZHUANTIList[i]); vue中dom和数据是绑定的，通过修改数据就能够实现对视图的修改，但是视图（dom）的更新是异步的，并不是修改了数据，视图会接着刷新。此时就用到了$nextTick,延迟回调，会将回调延迟到下次 DOM 更新..

element-ui 列表 type=“selection“设置默认选中

weixin_46949106的博客

03-07

2255

请求完列表后进行回调操作，this.$refs.table.toggleRowSelection(this.lists[i],true) 是官网中给出的方法，第一个参数是需要被勾选的行组成的列表，第二个参数为true，必须要传。这里需要注意的是el-table一定要有ref属性，比如ref=“table”

element-ui +vue实现行数据自动勾选——toggleRowSelection

weixin_42404174的博客

04-08

4092

业务需求主数据table展开依次渲染子数据，（通过@expand-change控制），当全选子数据时，默认勾选对应行的主数据，非全选时取消勾选主数据行。截图展示全选非全选（包括有禁用）代码部分业务代码已删除，仅保留处理逻辑。（1）给需要控制添加自动勾选的el-table加上ref属性 <el-table ref="mutipleTable" :data="tableData" height="87vh" style="width: 1..

element-ui表格回显时默认全选数据

Akatsuki233的博客

02-26

1513

html部分 <el-table :data="form.roomers" style="width: 100%" border tooltip-effect="dark" ref="multipleT...

Element-ui el-table 树形表格多选

qq_38939028的博客

11-29

8774

Element-ui el-table 树形表格多选关键方法 toggleRowSelection(row,flag) @select="rowSelect"(行选中) @select-all="selectAll"(全选) 页面代码 <el-table :data="dataList" ref="tableRef" highlight-cu...

element-ui el-table 使用toggleRowSelection点击一行来控制复选框

oneclarence的专栏

11-20

1696

#点击一行控制复选框 el-table 在table的一行上点击执行@row-click,使用toggleRowSelection(row,true)控制复选框“选择”，之后（不同时）执行@selection-change记录下那些行的复选框被选中了（之后可用来执行其他针对复选框的操作）.但再次点击行时首先判断是否为已选择项，即判断@selection-change中的multipleSelect...

【项目经验】：elementui多选表格默认选中

weixin_70245286的博客

09-17

4594

elementui多选表格默认选中

element 表格toggleRowSelection 回显勾选及选中数量问题

Z.Y.的博客

05-12

5204

el-table中加入row-key，type="selection"中加入:reserve-selection=“true”，reserve-selection为 true 则会在数据更新之后保留之前选中的数据。应该默认勾选一条数据，之后手动勾选了一条数据，@selection-change方法控制台打印出来是两条数据，但是界面上没有回显成功。原因是 data数据是我之前选中的行数据，数据没有改变。fileList是表格的所有数据，按下面这种写法就可以解决。这样就可以直接用data数据。

elementUI 表格多选框this.$refs.xxx.toggleRowSelection的使用方法

dqwdnishi的博客

01-11

3518

在elementUI官方实例中，multipleSelection代表选中的值，**toggleRowSelection(row,selection)**方法用于原先已选的值传入进行勾选，row传递被勾选行的数据，selected设置是否选中。需求是每次打开弹窗都会重新获取表格数据，并且要选中对应的数据，但直接使用那个方法并没有效果，因为表格中的数据还没有请求出来。解决：获取数据后在需要进行勾选操作的外面套一个$nextTick this.$nextTick(() => { ch

element table表单默认选中多条数据 toggleRowSelection不起作用解决办法

alokka的博客

07-04

2876

这是因为created生命周期执行的时候 DOM 还没有渲染，el-table 表格还没有渲染完成我们就直接使用了this.$refs.XXX.toggleRowSelection(item)方法，就不会生效。直接在外层套一层this.$nextTick()就可以了 this.$nextTick(() => { list.forEach((item) => { if (item.gasStatus === 1) { th

elementUI toggleRowSelection设置无效

热门推荐

为啥不能换名字的博客

12-26

2万+

// 初始化禁选的复选框 checkboxInit(row, index) { var that = this; that.$nextTick(() => { console.log(that.$refs.multipleTableGood); i...

Elementui中 toggleRowSelection() 方法实现分页切换时记录之前选中的状态

qq_40626218的博客

03-04

7956

先说下需求：表格导出功能。用户可以自定义选择导出的表格数据。遇到的问题：使用el-table组件的selection属性，可以实现多选表格数据的功能。但是el-table组件在翻页的时候，不会记录上一页的选项，再切换回上一页时，之前勾选过的选项会被清空。解决方案：使用toggleRowSelection()方法设置勾选项。思路：之前是使用一个数组记录当前页选中的选项，现在用一个数组记录每一页选中的选项。 Step1：在selection-change事件中绑定以下方法。需要注意的是，..

elementui table 默认选中toggleRowSelection以及多级表头固定采坑

weixin_44963140的博客

03-26

941

选不中原因分析：row-key对应的是列表里的对象，勾选的是咱们自己传的，表格认为你传回的选中集合跟列表row的对象不是同一个解决方案: 用传入的数据与表格数据比对然后在进行回显如果是动态数据也要回显，需要设置row-key与:reserve-selection=“true” // listData 表格数据----数组 // array 传入数据----数组 <el-table ...

element-ui table 单选

05-14

<think>好的，我现在需要帮助用户在Element-UI框架中实现表格的单选功能。用户希望得到示例代码，所以我得先回顾一下相关的引用内容，然后结合自己的知识来整理出一个清晰的解决方案。首先，根据用户提供的引用内容，引用[1]、[2]、[3]都提到了如何通过修改el-table的selection列来实现单选。特别是引用[3]中的代码示例，展示了如何处理selection-change事件以及如何通过清除已选中的行来确保只选中一行。不过用户现在使用的是Element-UI，而引用[2]提到了Vue3和Element Plus，但用户的问题是关于Element-UI的，所以可能需要调整代码以适应Vue2的语法。接下来，我需要考虑Element-UI中实现单选的关键步骤。通常，这包括以下几个部分： 1. **表格结构**：在el-table中添加type为selection的列，这样会显示多选框。但需要将其改为单选，所以需要隐藏表头的全选复选框。 2. **事件处理**：当用户选择某一行时，需要监听selection-change事件。如果用户选择了多行，需要保留最后一次选择，并清除之前的选择。 3. **样式调整**：可能需要通过CSS隐藏表头的全选复选框，使其只显示单选的效果。 4. **点击行选中**：用户可能希望点击行任意位置即可选中，这需要处理row-click事件，并在其中切换选中状态。现在需要将这些步骤转化为具体的代码示例。根据引用[3]，处理selection-change事件时，如果选中的数组长度超过1，则移除之前的选中项，只保留最后一个。同时，通过clearSelection和toggleRowSelection方法来控制选中状态。另外，通过CSS隐藏表头的全选框，这样可以避免用户进行全选操作。还需要考虑是否需要支持点击行来选中，这可以通过row-click事件来实现。当用户点击某一行时，清除所有选中，然后选中当前行。接下来，我需要将这些步骤整合成一个完整的示例代码，确保语法正确，并且符合Element-UI的用法。同时，需要提供必要的解释，说明每个部分的作用，以便用户理解。需要注意的是，用户可能在使用Vue2，因为Element-UI通常与Vue2搭配使用，而Element Plus是用于Vue3的。因此，代码示例应该基于Vue2的语法，比如使用this.$refs来引用表格组件，以及methods中的函数定义方式。最后，还要检查是否有遗漏的细节，比如CSS样式的正确性，事件绑定的正确方法，以及如何处理初始选中状态等。确保提供的代码可以直接运行，并且能够实现单选功能。</think>在Element-UI中实现表格单选功能，需要通过`selection`列类型结合事件控制实现。以下是完整示例代码和说明： ### 一、基础实现代码 ```html <template> <el-table ref="singleTable" :data="tableData" @selection-change="handleSelectionChange" @row-click="clickRow" style="width: 100%">  <el-table-column type="selection" width="55" :selectable="checkSelectable"> </el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{name: '张三', age: 20}, {name: '李四', age: 25}], selectedRow: null } }, methods: { // 控制选择逻辑 handleSelectionChange(val) { if (val.length > 1) { const lastRow = val.pop() this.$refs.singleTable.clearSelection() this.$refs.singleTable.toggleRowSelection(lastRow) } else { this.selectedRow = val[0] } }, // 点击行触发选择 clickRow(row) { this.$refs.singleTable.clearSelection() this.$refs.singleTable.toggleRowSelection(row) }, // 禁用已选项重复选择 checkSelectable(row) { return this.selectedRow !== row } } } </script> <style> /* 隐藏表头全选按钮 */ .el-table__header-wrapper .el-checkbox { display: none; } </style> ``` ### 二、核心实现原理 1. **事件控制**：通过`@selection-change`事件监听选择变化，当选择超过1行时自动清除旧选择[^3] 2. **行点击交互**：`@row-click`事件实现点击任意位置选中行，提升用户体验 3. **样式覆盖**：通过CSS隐藏表头的全选复选框，实现视觉上的单选效果[^1] 4. **选择限制**：`checkSelectable`方法防止已选项被重复勾选 ### 三、功能扩展建议 1. **默认选中**：在`mounted`生命周期中调用`toggleRowSelection`设置初始选中项 2. **圆型样式**：可替换复选框为radio组件，需自定义单元格渲染[^2] 3. **跨页保持**：若表格分页，需在翻页时保存/恢复选中状态