Vue 批量操作 多选框

最新推荐文章于 2024-04-23 16:26:38 发布
最新推荐文章于 2024-04-23 16:26:38 发布
阅读量1.2k 收藏 7
点赞数 2
分类专栏： Vue项目总结 文章标签： 前端 javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56044262/article/details/128486461
版权

 实现批量操作的核心属性

  1. :reserve-selection  设置为true
  2. type="selection"  将该列类型设置为selection
  3. row-key="id"  将每行的数据key绑定为id属性，使得选中后能够获取该行的id值传递给后端
  4. ref="table"  给当前表格起名字，方便调用方法时获取元素

创建一个存储id的实例数组

 在方法中通过this.$refs.table.selection获取选中的几行数据的数组，对数组元素遍历获取id值存储进ids实例中，再通过接口请求将数据发送给后端

 

 后端直接通过ArrayList获取前端传递的json数组对象

 

飞翔的企鹅i
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - 实现多选功能，点击选中并高亮显示效果（支持全选 / 反选，以及轻松的 “回显“ 数据）适用于商品、自定义卡片、标签的多选功能，选中多个选项，并且使其高亮，详细教程功能源码，干净整洁开箱即用
王佳斌
12-01 2889
vue实现多选全选功能，功能源码开箱即用，vue 多选功能，vue实现商品多选功能，Vue实现多选功能，vue实现自定义多选与单选的答题功能，vue 实现单选/多选效果，使用Vue实现标签多选功能，vue中,选中多个选项,并且使其高亮，vue实现点击选中高亮效果，vue中,选中多个选项,并且使其高亮，vue中,选中多个选项,并且使其高亮，Vue:实现一组按钮的多选功能，vue 实现选项卡多选功能,点击选中,再点击取消选中，vue实现点击当前标签高亮效果，vue多选功能(vue实现按钮多选)，使用vue实现标
修改vue elementUI多选框问题 elementui lib
01-22
问题：elementUI多选框，一维数组，如官网例子那样数组内元素为字符串时正常使用，但在实际情况多选框的元素为对象，为对象时，默认选中不显示，实际上是选中了，但是不显示 ...
Vue实现复选框的多选与全选
Zheng_xinle的博客
08-26 8935
Vue实现复选框的多选与全选 代码如下： <div id="app"> <table> <tr> <th> <!-- 这是全选复选框（即选中了这个复选框，所有选项复选框都被选中），其绑定数据的v-model为checkedAll，并绑定了改变事件changeAllChecked --> <input type="ch
Vue2 - Vue2项目中使用 ElementUI 的 el-select 实现下拉框多选功能
前端充电宝
03-04 416
Vue2项目中使用 ElementUI 的 el-select 实现下拉框多选功能
vue实现多选、全选功能
C_hydar的博客
08-19 8197
<!-- template --> <span class="title" v-if="clickAll" @click="clearCheck">取消</span> <span class="title" v-else @click="checkAll">全选</span> <div class="one-item" v-for...
Vue3多选框（Checkbox）
Mr Dear的博客
03-29 6805
整体样式功能与ant design保持一致的多选框组件，用于在一组可选项中进行多项选择。
el-select 下拉框多选实现全选
热门推荐
小小迎的博客
10-23 2万+
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些 方法一：下拉项增加一个【全选】，然后应该有以下几种情况： 1.下拉选项全都勾选时，【全选】自动勾选； 2.下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选； 3.下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选； 4.下拉选项和【全选】都选上的时候，不勾选任意...
Vue：全选多个选择框
孙悟空
06-15 4093
vuejs实现全选多个选择框
vue实现多选、全选
m0_59224033的博客
09-05 1万+
vue实现多选、全选功能，复制粘贴开箱即用，简简单单，干净卫生，欢迎C+V
Vue3实现地址多选
li-xun的博客
03-26 580
vue3语法糖实现一个地址多选框
vue实现多选框(复选框)
weixin_47084532的博客
04-17 1万+
<template> <table class="t1"> <tr class="tr1"> <td> <input type='checkbox' :checked="clsAll.length === pojectClsAll.length" @click='checkedAll()'>全选 .
vue多选框选择数据进行操作
qq_53696704的博客
12-02 702
vue多选框选择数据进行操作
vue表单绑定实现多选框和下拉列表的实例
08-29
本篇文章主要介绍了vue表单绑定实现多选框和下拉列表的实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目中使用多选框的实例代码
10-15
主要介绍了vue项目中使用多选框的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue实现多种复选框，含搜索
12-08
vue实现多种复选框，含搜索
vue运行多个子系统框架
01-25
1，支持vue多个子系统 2，支持每个子系统打包 3，支持每个子系统运行 4，提供各种node脚本
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 594
官网代码（在取消选中状态的时候不生效）
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 570
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 700
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
vue批量新增el-select和el-tree结合使用-树形结构多选框
06-11
如果你想要结合`el-select`和`el-tree`，并且希望实现树形结构的多选框，可以按照以下步骤操作： 1. 创建一个`selected`数组，用于存储用户选择的节点。 2. 在`el-select`组件中，设置`multiple`属性为`true`，并将`v-model`指向`selected`数组。 3. 在`el-tree`组件中，设置`show-checkbox`属性为`true`，并将`v-model`指向`selected`数组。 下面是示例代码： ``` <template> <div> <el-select v-model="selected" placeholder="请选择" multiple> <el-option v-for="node in nodes" :key="node.id" :label="node.name" :value="node.id"></el-option> </el-select> <el-tree :data="treeData" :node-key="node => node.id" show-checkbox :default-checked-keys="defaultCheckedKeys" :check-strictly="checkStrictly" :props="props" v-model="selected"></el-tree> </div> </template> <script> export default { data() { return { selected: [], nodes: [ { id: 1, name: '节点1' }, { id: 2, name: '节点2' }, { id: 3, name: '节点3' }, ], treeData: [ { id: 1, label: '一级 1', children: [ { id: 4, label: '二级 1-1', }, ], }, { id: 2, label: '一级 2', children: [ { id: 5, label: '二级 2-1', }, { id: 6, label: '二级 2-2', }, ], }, ], defaultCheckedKeys: [4, 5], checkStrictly: true, props: { children: 'children', label: 'label', value: 'id', checkStrictly: true, emitPath: false, multiple: true, checkDescendants: true, }, } }, } </script> ``` 在这个示例中，我们创建了一个`selected`数组，用于存储用户选择的节点。在`el-select`组件中，我们设置了`multiple`属性为`true`，并将`v-model`指向`selected`数组。在`el-tree`组件中，我们设置了`show-checkbox`属性为`true`，并将`v-model`指向`selected`数组。同时，我们还设置了其他一些属性，例如`checkStrictly`、`props`等，以便实现树形结构的多选框。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值