uni-app:实现表格多选及数据获取

 效果:

 

 代码:

<template><view><scroll-view scroll-x="true" style="overflow-x: scroll; white-space: nowrap;"><view class="table"><view class="table-tr"><view class="table-th1"><checkbox-group @tap="checkAll"><checkbox :checked="allChecked" /></checkbox-group></view><view class="table-th2">姓名</view><view class="table-th2">年龄</view><view class="table-th3">地点</view></view><view class="table-tr" v-for="(item, index) in list" :key="index"><view class="table-td1"><checkbox-group @change="checkClick(item)"><checkbox :checked="item.checked" /></checkbox-group></view><view class="table-td2">{{item.name}}</view><view class="table-td2">{{item.age}}</view><view class="table-td3">{{item.address}}</view></view></view></scroll-view><view><text>数组数据</text><view>{{selectedData}}</view></view></view>
</template>
<script>export default {data() {return {selectedData: [],allChecked: false,inputs: "",list: [{name: "张三",age: 21,checked: false,address: '波兰斯维诺乌伊希切',},{name: "李四",age: 22,checked: false,address: '冰岛尼斯湖',},{name: "王五",age: 23,checked: false,address: '云南西双版纳',},{name: "赵六",age: 41,checked: false,address: '阿尔卑斯雪山',},],}},methods: {// 单个的选择checkClick(item) {item.checked = !item.checked// console.log(item)if (item.checked) {this.selectedData.push(item);} else {const index = this.selectedData.findIndex(data => data === item);if (index !== -1) {this.selectedData.splice(index, 1);}}if (!item.checked) {this.allChecked = false} else {// 判断单个是否是被选择的状态const goods = this.list.every(item => {return item.checked === true})if (goods) {this.allChecked = true} else {this.allChecked = false}}console.log(this.selectedData)},//全选与全不选checkAll() {this.allChecked = !this.allChecked;if (this.allChecked) {this.list.map(item => {item.checked = true;if (!this.selectedData.includes(item)) {this.selectedData.push(item);}});} else {this.list.map(item => {item.checked = false;const index = this.selectedData.findIndex(data => data === item);if (index !== -1) {this.selectedData.splice(index, 1);}});}console.log(this.selectedData)}}}
</script>
<style>/* 表格样式 */.table {margin-top: 5%;font-size: 85%;display: table;width: 200%;border-collapse: collapse;box-sizing: border-box;}.table-tr {display: table-row;}.table-th1 {width: 5%;display: table-cell;font-weight: bold;border: 1rpx solid gray;background-color: #51aad6;text-align: center;vertical-align: middle;padding: 10rpx 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;}.table-th2 {width: 20%;display: table-cell;font-weight: bold;border: 1rpx solid gray;background-color: #51aad6;text-align: center;vertical-align: middle;padding: 10rpx 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;}.table-th3 {width: 50%;display: table-cell;font-weight: bold;border: 1rpx solid gray;background-color: #51aad6;text-align: center;vertical-align: middle;padding: 10rpx 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;}.table-td1 {width: 5%;display: table-cell;border: 1rpx solid gray;text-align: center;vertical-align: middle;padding: 10rpx 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;}.table-td2 {width: 20%;display: table-cell;border: 1rpx solid gray;text-align: center;vertical-align: middle;padding: 10rpx 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;}.table-td3 {width: 50%;display: table-cell;border: 1rpx solid gray;text-align: center;vertical-align: middle;overflow: hidden;text-overflow: ellipsis;word-break: break-all;/* padding: 5px 0; */}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/25664.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql高级三:sql性能优化+索引优化+慢查询日志

内容介绍 单表索引失效案例 0、思考题&#xff1a;如果把100万数据插入MYSQL &#xff0c;如何提高插入效率 &#xff08;1&#xff09;关闭自动提交&#xff0c;只手动提交一次 &#xff08;2&#xff09;删除除主键索引外其他索引 &#xff08;3&#xff09;拼写mysql可以执…

Typescript中的元组与数组的区别

Typescript中的元组与数组的区别 元组可以应用在经纬度这样明确固定长度和类型的场景下 //元组和数组类似&#xff0c;但是类型注解时会不一样//元组赋值的类型、位置、个数需要和定义的类型、位置、个数完全一致&#xff0c;不然会报错。 // 数组 某个位置的值可以是注解中的…

新能源电车交流充电桩控制主板的安全性维度

你是否想过&#xff0c;交流充电桩主板的安全性有多重要?它不仅关乎充电设备的寿命&#xff0c;还关乎电网的安全。今天我们就来探讨一下&#xff0c;如何从多个维度保证交流充电桩主板的安全性。 首先&#xff0c;交流充电桩主板采用多重安全保护技术&#xff0c;可以有效地保…

SM2算法的抗侧信道攻击

SM2 算法中底层模块抗侧信道 标量乘 ( [ k ] G [k]G [k]G) 运算过程中需要用到大量的倍点运算与点加运算。传统倍点运算与点加运算之间由于需要的运算次数不同&#xff0c;功耗存在明显区别&#xff0c;攻击者可以通过功耗波形特征分析密钥信息。传统算法如下图所示&#xff1a…

11. 使用tomcat中碰到的一些问题

文章目录 问题一&#xff1a;Tomcat的startup.bat启动后出现乱码问题二&#xff1a;一闪而退之端口占用问题三&#xff1a;非端口问题的一闪而退问题四&#xff1a;服务器的乱码和跨域问题问题五: 在tomcat\webapps\下创建文件夹为什么tomcat重启就会丢失问题六&#xff1a;Tom…

【C++】AVL(平衡二叉搜索树)树的原理及实现

文章目录 一、引言 二、AVL树的概念 三、AVL树的插入 3、1 AVL树的简单插入 3、2 旋转分类 3、2、1 新节点插入较高右子树的右侧&#xff1a;左单旋 3、2、2 新节点插入较高左子树的左侧&#xff1a;右单旋 3、2、3 新节点插入较高左子树的右侧&#xff1a;左右双旋&#xff08…

d2l 线性回归的简洁实现

文章目录 线性回归的简洁实现1. 生成数据集2. 调用框架现有api来读取数据3. 使用框架预定义好的层4. 初始化模型参数5. 均方误差6. 实例化SGD实例&#xff08;优化算法&#xff09;7. 训练 线性回归的简洁实现 上一节 张量&#xff1a;数据存储、线性代数&#xff1b;自动微分…

Transformer 立体视觉 Depth Estimation

1. Intro 立体深度估计具有重要的意义,因为它能够重建三维信息。为此,在左右相机图像之间匹配相应的像素;对应像素位置的差异,即视差,可以用来推断深度并重建3D场景。最近基于深度学习的立体深度估计方法已经显示出有希望的结果,但仍然存在一些挑战。 其中一个挑战涉及使…

stable diffusion webui 安装

安装环境:cuda10.2-cudnn8-devel-ubuntu18.04 torchtorchvision:[pytorch]pytorch官方安装法_torch1.13.1cu117_FL1623863129的博客-CSDN博客 error&#xff1a;RuntimeError: Couldnt determine Stable Diffusions hash: 69ae4b35e0a0f6ee1af8bb9a5d0016ccb27e36dc. 解决方法…

数据库执行新增时,字段写值错乱/字段值写反了 的问题

今天给表加了个字段&#xff0c;执行新增后查看表&#xff0c;发现数据库执行新增完成后&#xff0c;字段写值错乱了&#xff0c;表现为这两个字段的值写反了↓↓↓↓↓↓ 排查了xml中所有赋值的地方&#xff0c;全都没有问题 字段与属性的通用映射&#xff1a; <resultMap…

(统计学习方法|李航)专栏学习笔记目录导航

第一章 统计学习方法概论 &#xff08;统计学习方法|李航&#xff09;第一章统计学习方法概论-一二三节统计学习及统计学习种类&#xff0c;统计学习三要素 &#xff08;统计学习方法|李航&#xff09;第一章统计学习方法概论——四五六节&#xff1a;模型评估与模型选择&…

【已解决】Java 中使用 ES 高级客户端库 RestHighLevelClient 清理百万级规模历史数据

&#x1f389;工作中遇到这样一个需求场景&#xff1a;由于ES数据库中历史数据过多&#xff0c;占用太多的磁盘空间&#xff0c;需要定期地进行清理&#xff0c;在一定程度上可以释放磁盘空间&#xff0c;减轻磁盘空间压力。 &#x1f388;在经过调研之后发现&#xff0c;某服务…

编织人工智能:机器学习发展历史与关键技术全解析

文章目录 1. 引言1.1 机器学习的定义1.2 重要性和应用场景重要性应用场景 2. 机器学习的早期历史2.1 初期理论与算法感知机决策树 2.2 早期突破支持向量机神经网络初探 3. 21世纪初期的发展3.1 集成学习方法随机森林XGBoost 3.2 深度学习的崛起卷积神经网络&#xff08;CNN&…

css-4:元素水平垂直居中的方法有哪些?如果元素不定宽高呢?

1、背景 在开发中&#xff0c;经常遇到这个问题&#xff0c;即让某个元素的内容在水平和垂直方向上都居中&#xff0c;内容不仅限于文字&#xff0c;可能是图片或其他元素。 居中是一个非常基础但又是非常重要的应用场景&#xff0c;实现居中的方法存在很多&#xff0c;可以将这…

《MySQL45讲》笔记—锁

数据库锁设计初衷是处理并发问题&#xff0c;作为多用户共享的资源&#xff0c;当出现并发访问的时候&#xff0c;数据库需要合理地控制资源的访问规则&#xff0c;而锁就是用来实现这些访问规则的重要数据结构。 根据加锁的范围&#xff0c;MySQL里面的锁大致可以分为全局锁、…

139. 单词拆分(leetcode刷题记录)

单词拆分 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 示例 1&#xff1a; 输入: s “leetcode”, wordDict …

【数据结构和算法】--N叉树返回根节点到目标节点的路径

目录 一、前言二、Java代码实现 一、前言 项目中接触一个问题&#xff1a;在大量有父子关系的列表中&#xff0c;需要筛选出特定约束的数据【要求某个目标节点延续到根节点的数据】。这个问题抽象为数据结构&#xff0c;就是&#xff1a;N叉树返回根节点到目标节点的路径 二、…

Spring IOC

◆ 传统Javaweb开发的困惑 ◆ IoC、DI和AOP思想提出 ◆ Spring框架的诞生 Spring | Home IOC控制反转&#xff1a;BeanFactory 快速入门 package com.xiaolin.service.Impl;import com.xiaolin.dao.UserDao; import com.xiaolin.service.UserService;public class UserServic…

Intel 4工艺太难了!酷睿Ultra终于突破5GHz

无论是14nm还是10nm&#xff0c;Intel这些年的新工艺都有一个通性&#xff1a;刚诞生的时候性能平平&#xff0c;高频率都上不去&#xff0c;只能用于笔记本移动端(分别对应5代酷睿、10代酷睿)&#xff0c;后期才不断成熟&#xff0c;比如到了13代酷睿就达到史无前例的6GHz。 接…

【Linux】守护进程

1 相关概念 1.1 守护进程的概念 守护进程也叫做精灵进&#xff0c;是运行在后台的一种特殊进程。它独立于控制终端并且可以周期性的执行某种任务或者处理某些发生的事件。 守护进程是非常有用的进程&#xff0c;在Linux当中大多数服务器用的就是守护进程。比如&#xff0c;web…