ElementUI 表格多选框默认全选

最新推荐文章于 2024-05-14 22:52:31 发布
最新推荐文章于 2024-05-14 22:52:31 发布
阅读量3.3k 收藏 5
点赞数 1
分类专栏： elementUI 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/interestANd/article/details/121650809
版权
  1. 先在el-table中用ref标记一下
    参考代码
<el-table :data="tableData" height="400" max-height="400" ref=multipleTable ></el-table>
  1. 在数据获取完成的方法中，加入 this.$refs.multipleTable.toggleAllSelection();这行代码即可

注意事项

当列表的数据量过大时，页面的dom元素过多，如果使用上面所述方式，会导致页面直接卡死，浏览器提示页面无响应。这时候建议使用pl-table来解决。

InterestAndFun
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ElementUI的Table如何默认全选
weixin_46719255的博客
01-13 2862
ElementUI的Table如何默认全选 注意！！！！！！！！！！！. [请请求拿到数据后，再调用这个方法，给table一个ref，需要用ref来调用他的方法] // An highlighted block loadListData() { // 这只是一个请求 this.searchForm["orderType"] = 2; return this.getOrderList({ ...this.searchForm, clientType: "1",
elementUI的table默认全选,并解决跨分页取消选中回显的问题,并拿到取消选中的集合(一般用于table数据很多需要给选中的项发短信等需求)
shilong0424的博客
12-08 2076
table表格数据过多,默认全选,传给后端不太实用,此时获取取消的数据传给后端;并解决跨分页取消选中回显的问题.
vue3：el-table多选框设置默认选中，翻页保留选中状态
CYL_2021的博客
04-17 9328
el-table多选框设置默认选中，进行翻页，之前选中的数据没有保留选中状态
el-select 默认选中值
最新发布
qq_33240556的博客
05-14 1214
绑定一个变量，并且初始化这个变量为想要默认选中的选项的值。组件用于创建下拉选择菜单。如果你想设置一个默认选中的值，你可以使用。在Element UI（一个用于Vue.js的UI框架）中，如果你想让“选项2”作为默认选中项，你只需在。这样，当页面加载时，“选项2”就会被默认选中。// 初始化这里为你想默认选中的值。
element-ui table 默认全选
weixin_30947043的博客
08-12 2443
来自： https://juejin.im/post/5cf24f1ee51d4577583ddc77 侵删 this.deviceTableData = res.body || []; // console.log("this.deviceTableData", this.deviceTableData); //默认全选 ...
Element UI+VUE table 默认全选
heni6560的博客
06-15 1721
Element UI+VUE table 默认全选
element-ui表格回显时默认全选数据
Akatsuki233的博客
02-26 1391
html部分 <el-table :data="form.roomers" style="width: 100%" border tooltip-effect="dark" ref="multipleT...
利用Bootstrap实现表格复选框checkbox全选
08-31
Bootstrap相信应该不用多...这篇文章主要给大家介绍了如何利用Bootstrap实现表格中的checkbox复选框全选效果，文中给出详细的介绍及完整的实例代码，相信对大家的理解和学习具有一定的参考借鉴价值，下面来一起看看吧。
elementUI多选框反选的实现代码
10-17
主要介绍了elementUI多选框反选的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
layui复选框的全选与取消实现方法
12-29
废话不多说啦，直接贴上代码吧！    *权限表        
element 表格默认选中
全易
12-23 1272
背景：默认选中的数据接口会返回值会放在最前面。例如选中的有8个，那么表格前8条数据就该是选中的。所以，接口eternal是返回有几个选中的数字 其实下图还存在问题，返回的eternal应该有分页概念 ...
Element 默认勾选表格 toggleRowSelection的实现
10-16
主要介绍了Element 默认勾选表格 toggleRowSelection的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在vue3中element-plus如何设置el-table默认全选
qq_63128300的博客
11-04 1843
然后在挂载函数中调用el-table的函数toggleAllSelection，即可实现全部勾选。首先我们使用ref引用el-table标签。
el-table默认全选和选中某行数据
qq_47909376的博客
02-20 2887
el-table默认全选和选中某行数据
element ui table 选中全部
weixin_59081597的博客
05-23 2767
html 添加一列，type设置成'selection' ，点击全选后获取表格ref实例用forEach遍历调用实例中的toggleAllSelection()方法 <el-button class="all" @click="selectAll">全选</el-button> <el-table ref="table" border :data="tableData" style="width:
【element-plus】使用elTable设置默认全选toggleRowSelection失效
qq_45406325的博客
11-05 2744
补充：如果还是想通过toggleRowSelection实现指定行选中，可以尝试用计时器，以下方法是在切换分页的时候刷新选中状态，dom刷新比toggleRowSelection慢。展示，并且包含复选框，默认。目标效果：子节点数据通过。
elementu el-table 多选加展开行，全选选中展开行
ready456789的专栏
09-08 2421
效果图 问题，一般情况下做了展开，无法全选，系统管理下面的选择框，做法如下taable加事件自己处理 @select-all，调用ref的toggleRowSelection方法 <el-dialog title="修改角色" :visible.sync="editmenudialogVisible" width="60%" @close="oncloseeditmenu"> <el-table .
element-UI表格多选，翻页记住之前的选项以及弹窗回显默认选中
MISS_CJL的博客
10-17 3920
最近有个需求，element-ui表格多选，翻页的时候选中的选项不会被清空。 我用的element-ui版本是：2.8.2 下面是关键代码，模拟数据和分页根据自己需求加 <el-table :data="productList" ref="multipleTable" :row-key="getRowKeys" @selection-change=...
Vue中为ElementUI的表格多选框做外部全选按钮
weixin_45386734的博客
10-18 4804
Vue中为ElementUI的表格多选框做外部全选按钮 由于在某些情况下，会使用模板生成表格，所以在column模板中type = selection时，不像在el-select-group中可以有明确的code值可以判断、选取，所以平时要用ref = multipleTable来保证能取到模板生成的表格。 //生成表格的模板代码 <div class="table taskcontent"...
elementui 表格全选当前页，全选所有数据
04-28
在 ElementUI 的表格中，可以通过设置 `show-selection` 属性来开启表格的多选功能，然后在表格的列中添加一个选择列来显示多选框，如下所示： ```html <el-table :data="tableData" @selection-change="handleSelectionChange" show-selection > <el-table-column type="selection"></el-table-column> <!-- 其他列 --> </el-table> ``` 接着，如果需要实现全选当前页的功能，可以通过调用表格实例的 `toggleAllSelection` 方法来实现，如下所示： ```js methods: { handleSelectAll(selection) { this.$refs.table.toggleAllSelection(); }, handleSelectionChange(selection) { this.selectedRows = selection; } } ``` 其中，`handleSelectAll` 方法会在全选按钮点击时触发，然后调用表格实例的 `toggleAllSelection` 方法来实现全选当前页的功能。 如果需要实现全选所有数据的功能，可以通过在表格的底部添加一个全选按钮来实现，如下所示： ```html <template> <div> <el-table ref="table" :data="tableData" @selection-change="handleSelectionChange" show-selection > <el-table-column type="selection"></el-table-column> <!-- 其他列 --> </el-table> <div style="margin-top: 20px;"> <el-checkbox v-model="isAllSelected" @change="handleSelectAll"> 全选所有数据 </el-checkbox> </div> </div> </template> <script> export default { data() { return { tableData: [], // 表格数据 isAllSelected: false // 是否全选所有数据 }; }, mounted() { // 加载表格数据 }, methods: { handleSelectAll(value) { this.$refs.table.clearSelection(); if (value) { this.$refs.table.toggleAllSelection(); } }, handleSelectionChange(selection) { this.isAllSelected = this.tableData.length === selection.length; } } }; </script> ``` 其中，`isAllSelected` 用来保存是否全选所有数据的状态，`handleSelectAll` 方法会在全选所有数据的复选框状态改变时触发，然后调用表格实例的 `clearSelection` 方法来清空表格的选中状态，最后调用表格实例的 `toggleAllSelection` 方法来实现全选所有数据的功能。在 `handleSelectionChange` 方法中，需要根据选中的行数来判断是否全选所有数据，并更新全选所有数据的复选框状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值