uniapp实现表格的多选功能

已于 2023-09-05 13:57:39 修改
阅读量786 收藏 3
点赞数 1
文章标签： uni-app
于 2023-09-05 13:49:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48954899/article/details/132689266
版权

最近需要做一个数据多选功能，我用到了uniapp的table组件，这个组件自带多选的功能，只需要将type设置为section

然后官方给出了多选触发事件

该事件的回调参数中，返回index和vlaue,而vlaue一直为空，获取不到值，那我们可以获取到勾选数组的序号数组：e.detail.index，通过index来获取数据项

最后遍历序号数组，赋值获取到最后的数据

最后，多选功能就完成了，

这中间有一个问题，这个多选功能实现了，如何在编辑数据时，通过获取数据详情，再次回显数据并勾选在列表中，目前我还没有找到解决方法

陌笑忆伤
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element table表格 多选中将行设置为不可选中
xiaojiakun的博客
08-26 2314
<el-table-column type="selection" :selectable="checkSelect" width="40" /> 此属性必须加在 type为“selection”上 table属性中将其方法返回为true 为可选中 返回false 不可选中 方法checkSelect checkSelect(row) { ...
uniapp/h5多选模糊搜索下拉框（可以进行搜索匹配以及多选功能）
04-01
uniapp/h5通用模糊下拉搜索下拉多选框； 使用步骤： 1、下载资源包，并进行解压； 2、将components文件夹中的文件拷贝到自己项目的components文件夹中； 3、在业务文件夹中引用组件multipleDataPickey，使用实例如...
封装uniapp-uni-table组件，（其中按钮利用插槽自定义插入）获取点击行事件，可传入自定义表头，传入后端数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码
lanbaiyans的博客
11-28 1302
表格内部的按钮，利用了作用域插槽，实现组件中数据向引用组件进行传值从而获取行内数据table组件👇 其中定义slot插槽 ，表格上方的按钮插槽名outSideBtn，表格内部的按钮插槽名bodyIndex。
uni-app实现多选
热门推荐
qq_43195831的博客
05-26 1万+
就这么一个简单的样式切换问题，让我搞了好久，终于功夫不负有心人，还是给弄出来了，这不，就趁热打铁，给它记录下来，万一后期又忘了还能有个看处，嘻嘻~（说明我记性差，朋友都说我是鱼的记忆），好了不多说，先说下步骤哈! 1、先把基础的布局及样式写好（基本操作） 2、把要替换的样式写好（记得给个类名，上同） 3、然后就是我们的js操作了 步骤就是这样，为了看得更清晰，明了，上代码吧，相信很多人会跟我一样，有时候会有一些懵逼的地方（都是小白，咱也不敢装逼，哈哈~） 先看下效果图，毕竟看了效果图才知道是不是自己想要的效
uni-app:实现表格多选及数据获取
weixin_46001736的博客
08-02 2215
uni-app:实现表格多选及数据获取
uni-table多选获取当前行数据 - - -亲测有效
m0_71835253的博客
10-18 607
/ 将数组中的值，作为table表格数组的下标来获取对应的当前行数据。let selectedIndexs = [] // 选择的下标数组。console.log('选中的当前行数据', arrList)let arrList = [] // 选择的行数据。因为全选的时候,只能返回当前的索引,所有要处理一下。废话不多说，直接上代码。
封装uniapp-uni-table组件，获取点击行事件，可传入自定义表头，传入后端数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码
lanbaiyans的博客
05-23 6256
封装uniapp-uni-table组件，点击行事件，传入表头，传入数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码
uniapp多选标签/多选按钮/多选框源码
12-01
本项目着重讲解了如何在`uni-app`中实现多选标签、多选按钮和多选框的功能，这对于构建用户交互丰富的应用至关重要。 首先，我们来看“多选标签”。在UI设计中，多选标签（Multiple Select Tags）通常用于让用户在...
uniapp 表格的介绍和使用
11-17
总的来说，uniapp的表格组件提供了丰富的定制化选项，包括但不限于数据展示、排序、筛选和多选功能，使得开发者能够轻松构建功能齐全的表格应用。在实际开发中，根据具体需求灵活运用这些特性，可以极大地提升用户...
layui-table表复选框勾选的所有行数据获取的例子
12-29
项目需求，可以用复选框勾选项目进行提交，如下表 <table class=layui-table lay-data={url: lay-filter=test3> <thead> <tr> <th lay-data={type:>ID</th> <th lay-data={field:>ID</th> <th lay-data={field:>测试项</th> <th lay-data={field:'t2', edit:
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
uniapp实现计算器功能
10-05
【uniapp实现计算器功能】 uniapp是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、H5、小程序、快应用等多个平台运行。本教程将详细讲解如何利用uniapp来实现一个计算器的功能，...
【示例】element-ui table 的 selection 设置禁用选择框之禁止选中行，设置只可以选中某行
Ahuuua的博客
12-01 1万+
描述： 设置el-table中的某些行可以选中，使用的是selectable参数。 代码如下： <el-table-column type="selection" :selectable="checkSelectable" width="55"> </el-table-column> 示例一： 设置可选中的条件： checkSelectable(row) { return row.date == '20.
uniapp 购物车 全选 多选 支付（根据项目需求），记录
qq_41065593的博客
09-01 935
uniapp 购物车 全选 多选 支付（根据项目需求）
uni-app 单选/多选/滑动 demo
crazyo2jam的博客
01-09 3656
<template> <view> <view class="uni-padding-wrap uni-common-mt"> <view> <checkbox-group @change="checkboxChange2"> <label> <checkbox value=...
uniapp u-tabs表单如何默认选中
zzx262625的博客
11-08 1416
该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。首先在return中声明一个变量：activeIndex：3；然后在点击事件里触发。参数很重要，如果您的tabs项只有几个，且不想tabs导航栏可以被左右滑动的话，请一定要设置。current 而不是active；但如果想默认选中其中一个该如何设置呢？只需要添加一个关键属性；
uniapp关于选择多个选项和取消选项
阿宝的博客
10-07 852
【代码】关于选择多个选项和取消选项。
uniapp 向左滑动进入下一题，向右滑动进入上一题功能实现
最新发布
beyond520lin的博客
08-24 120
在 UniApp 中实现向左滑动进入下一题，向右滑动进入上一题的功能，可以利用触摸事件来判断用户的滑动方向。：确保你有一个可以显示的问题的页面。：通过touchstart和touchend事件来判断用户的滑动方向。：根据滑动的方向改变当前问题的索引。
uniapp-uni-easyinput 放入% 图标
06-07
如果你想在 uniapp-uni-easyinput 中添加“%”符号的图标，你可以使用 Unicode 编码来添加一个百分号的字符，并在输入框中使用该字符作为图标。在 HTML 中，可以使用 `%` 来表示百分号的 Unicode 编码，因此你可以尝试在输入框中添加以下代码： ```html <uni-input placeholder="请输入百分比"> <template #right> % </template> </uni-input> ``` 这将在输入框的右侧添加一个百分号的字符作为图标。你可以根据需要调整样式和位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值