uniapp实现表格的多选功能

记录一下最近在做一个的表格数据多选功能。需求大致为支持多选、支持跨分页的连续选择、支持通过查询框后手动选择数据(我是后端选手,前端不太熟悉单纯记录~)。

主要思路为:

  • 将table中的唯一id,存入数组tableIds中进行记录。
  • 在选中事件中,若当前为新增则存id,若为移除则remove该id。
  • 在分页事件触发时(同时会触发表格的选中事件,在这里我检查如果当前为分页事件标志则不进行表格的选中事件),首先清除表格的所有选中项 table.value.clearSelection() ,然后查询当前页的数据是否存在已经选中的数据,若存在则选中 table.value.toggleRowSelection(index) 
  • 在search事件触发时(同时会触发表格的选中事件,在这里我不进行表格的选中事件逻辑),和上面一样重新构造选中数据。

templete

<template><view><uni-section><uni-search-bar @confirm="search" :focus="true" v-model="queryParam.name" @blur="blur" @input="input"@cancel="cancel" @clear="clear"></uni-search-bar></uni-section><view class='table-container'><uni-tablestyle='margin: 0;padding: 0'ref="table":loading="loading"borderstripetype="selection"emptyText="暂无更多数据"@selection-change="selectionChange"><uni-tr><uni-th :style="{ width: '100px', textAlign: 'center',height: '50px' }">姓名</uni-th><uni-th :style="{ width: '100px', textAlign: 'center' ,height: '50px'}">工号</uni-th><uni-th :style="{ width: '200px', textAlign: 'center' ,height: '50px'}">直属部门</uni-th></uni-tr><uni-tr style='height: 40px ;flex: 1 ' v-for="(item, index) in tableData" :key="index"><uni-td>{{ item.name }}</uni-td><uni-td>{{ item.employeeNo }}</uni-td><uni-td>{{ item.department }}</uni-td></uni-tr></uni-table><view><uni-paginationhow-icon:page-size="pageSize":current="pageCurrent":total="total"@change="change"/></view></view><button:disabled='isSubmitButtonDisabled'class='btn-submit'type='primary'@click='submit'>提交</button></view>
</template>

ts相关代码


<script lang='ts' setup>
import {watch, onMounted, reactive, ref} from 'vue';
import {getHttp} from '@/services';
import {qcStore} from "@/store/qcStore";
import {onShow} from "@dcloudio/uni-app";let tableData = ref([]);
let pageSize = ref(10);
let pageCurrent = ref(1);
let total = ref(0);
let loading = ref(false);
let disableSelectionChangeFlag = ref(false);
let isSubmitButtonDisabled = ref(true);
const table = ref();
const queryParam = reactive({name: ''
})
let qc = qcStore();
onMounted(() => {getData(pageSize.value, pageCurrent.value);
});
onShow(() => {qc.clearPersonIdsList();qc.clearPersonNamesList();
})
let tableIds = ref([]);
let tableNames = ref([]);
let preItems = ref([]);
let currentItems = ref([]);async function search(res) {pageCurrent.value = 1;await getData(pageSize.value, pageCurrent.value);clearAndreSelect();
}function input(res) {queryParam.name = res;
}async function clear(res) {queryParam.name = '';pageCurrent.value = 1;await getData(pageSize.value, pageCurrent.value);clearAndreSelect();
}function blur(res) {
}async function cancel(res) {queryParam.name = '';pageCurrent.value = 1;await getData(pageSize.value, pageCurrent.value);clearAndreSelect();
}// 多选
function selectionChange(e) {if (!disableSelectionChangeFlag.value) {currentItems.value = e.detail.index;//新增项let addItem = currentItems.value.filter(item => !preItems.value.includes(item));//删除项let removeItem = preItems.value.filter(item => !currentItems.value.includes(item));preItems.value = [...currentItems.value];if (addItem.length > 0) {addItem.forEach(i => {let personId = tableData.value[i].id;if (!tableIds.value.includes(personId)) {tableIds.value.push(personId);tableNames.value.push(tableData.value[i].name);}})}if (removeItem.length > 0) {removeItem.forEach(i => {let personId = tableData.value[i].id;if (tableIds.value.includes(personId)) {tableIds.value = tableIds.value.filter(a => personId != a);tableNames.value = tableNames.value.filter(a => a != tableData.value[i].name)}})}}}async function change(e) {disableSelectionChangeFlag.value = true;await getData(pageSize.value, e.current);clearAndreSelect();disableSelectionChangeFlag.value = falsepageCurrent.value = e.current;
}function clearAndreSelect() {disableSelectionChangeFlag.value = true;table.value.clearSelection()preItems.value.length = 0;currentItems.value.length = 0;tableData.value.forEach(data => {if (tableIds.value.includes(data.id)) {let index = tableData.value.indexOf(data);console.log(index)table.value.toggleRowSelection(index)preItems.value.push(index);currentItems.value.push(index);}})disableSelectionChangeFlag.value = false;
}function getData(pageSize: number, currentPage: number) {return new Promise((resolve, reject) => {getHttp('kengic-boot/qctask/qcTask/getQcReviewPerson', {params: {pageSize: pageSize,pageCurrent: currentPage,name: queryParam.name}}).then((data) => {tableData.value = data.records;total.value = data.total;pageCurrent.value = data.current;resolve();})})}watch(() => tableIds, (newValue) => {if (Object.keys(newValue.value).length > 0) {isSubmitButtonDisabled.value = false;} else {isSubmitButtonDisabled.value = true;}
}, {deep: true, immediate: true})/*** 提交.*/
function submit() {//跳转到异常填写界面qc.setPersonIdsList(tableIds.value);qc.setPersonNamesList(tableNames.value);console.log(qc.getPersonIdsList)uni.navigateBack({url: '/pages-manage/equipment-patrol/patrol-task/patrol-task-report'})
}
</script>

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

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

相关文章

金融业的等保测评实践与成效:以实际案例为鉴

在数字化浪潮席卷全球的今天&#xff0c;金融业作为信息密集型的行业&#xff0c;其信息安全与业务连续性面临着前所未有的挑战。为了确保金融数据的安全性和业务的稳健运行&#xff0c;金融业积极响应国家信息安全等级保护制度&#xff08;简称“等保”&#xff09;&#xff0…

VMware Cloud Foundation ESXi 主机

一、准备嵌套 ESXi 主机环境# 1)物理 ESXi 主机信息 本次准备用于部署 VCF 嵌套实验环境的物理宿主机的配置信息如下图所示。其实,部署 VCF 环境主要对内存的大小要求比较高,部署完整的管理域相关组件下来差不多就要占用 200 GB左右内存,而对 CPU 和存储的需求可以根据实…

Pytorch使用教学8-张量的科学运算

在介绍完PyTorch中的广播运算后&#xff0c;继续为大家介绍PyTorch的内置数学运算&#xff1a; 首先对内置函数有一个功能印象&#xff0c;知道它的存在&#xff0c;使用时再查具体怎么用其次&#xff0c;我还会介绍PyTorch科学运算的注意事项与一些实用小技巧 1 基本数学运算…

idea中项目目录,文件显示不全问题

问题&#xff1a;idea中项目目录显示不全问题 解决办法1&#xff1a; 删除目录中的.idea文件 用idea重新打开文件就行了 办法2&#xff1a;手动导入为maven项目 1. 2. 3. 4.选择要导入的项目&#xff0c;导入为maven

在英特尔 Gaudi 2 上加速蛋白质语言模型 ProtST

引言 蛋白质语言模型 (Protein Language Models, PLM) 已成为蛋白质结构与功能预测及设计的有力工具。在 2023 年国际机器学习会议 (ICML) 上&#xff0c;MILA 和英特尔实验室联合发布了ProtST模型&#xff0c;该模型是个可基于文本提示设计蛋白质的多模态模型。此后&#xff0…

昇思25天学习打卡营第22天|Pix2Pix实现图像转换

Pix2Pix图像转换学习总结 概述 Pix2Pix是一种基于条件生成对抗网络&#xff08;cGAN&#xff09;的深度学习模型&#xff0c;旨在实现不同图像风格之间的转换&#xff0c;如从语义标签到真实图像、灰度图到彩色图、航拍图到地图等。这一模型由Phillip Isola等人在2017年提出&…

【组件协作】模板方法

文章目录 模板方法总体划分重构组件协作模式——模板方法动机代码——做法一代码——做法二对比定义缺点总结 其他 模板方法 总体划分 设计模式的总体分类&#xff1a; 目的&#xff1a; 创建型&#xff1a;解决对象创建的工作结构型&#xff1a;对象在需求变化对结构的冲击…

编写Hello World!,开启cpp人生

一、具体步骤 1.、安装Visual Studio2019(网上教程很多&#xff09;并打开。 2、新建项目 首先配置新项目 其中 解决方案包含项目 然后添加cpp文件并编写代码 代码如下 #include <iostream> using namespace std; int main() {cout << "Hello World~&qu…

electron TodoList网页应用打包成linux deb、AppImage应用

这里用的是windows的wsl的ubuntu环境 electron应用打包linux应用需要linux下打包&#xff0c;这里用windows的wsl的ubuntu环境进行操作 1&#xff09;linux ubuntu安装nodejs、electron 安装nodejs&#xff1a; sudo apt update sudo apt upgrade ##快捷安装 curl -fsSL http…

[Day 35] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

區塊鏈的分布式存儲技術 區塊鏈技術自2008年比特幣白皮書發表以來&#xff0c;已經成為一種革命性的技術&#xff0c;帶來了許多創新。區塊鏈本質上是一個去中心化的分布式賬本&#xff0c;每個節點都持有賬本的副本&#xff0c;並參與記錄和驗證交易。分布式存儲是區塊鏈的重…

在SAP中创建主数据的常用BAPI

科目主数据: BAPI_FINANCIAL_ACCOUNTING_DOCUMENT_CREATE &#xff1a;用于创建财务会计凭证。 成本中心: BAPI_COSTCENTER_CREATEMULTIPLE &#xff1a;用于创建多个成本中心。BAPI_COSTCENTER_CHANGEMULTIPLE &#xff1a;用于修改多个成本中心。 利润中心: BAPI_PROFITCEN…

机器学习驱动的智能化电池管理技术与应用

目录 主要内容 电池管理技术概述 电池的工作原理与关键性能指标 电池管理系统的核心功能 SOC估计 SOH估计 寿命预测 故障诊断 人工智能机器学习 基础 人工智能的发展 机器学习的关键概念 机器学习在电池管理中的应用案例介绍 人工智能在电池荷电状态估计中的…

小猪佩奇.js

闲着没事 使用js 画一个小猪佩奇把 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</tit…

力扣第三十三题——搜索旋转排序数组

内容介绍 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], ..., nums[n-1], nums[0], num…

UDP进行端口转发时,数据丢失率太高怎么办

在网络通信中,UDP (用户数据报协议) 因其低延迟和高效率而被广泛使用。然而,当使用UDP进行端口转发时,我们可能会遇到数据丢失率高的问题。本文将探讨这个问题的原因及其解决方案,特别关注如何通过调整缓冲区大小来改善情况。 问题根源 UDP数据包丢失可能由多种因素导致,包括…

UDP/TCP协议解析

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…

Elasticsearch:跨集群使用 ES|QL

警告&#xff1a;ES|QL 的跨集群搜索目前处于技术预览阶段&#xff0c;可能会在未来版本中更改或删除。Elastic 将努力解决任何问题&#xff0c;但技术预览中的功能不受官方 GA 功能的支持 SLA 约束。 使用 ES|QL&#xff0c;你可以跨多个集群执行单个查询。 前提&#xff1a; …

实战解读:Llama Guard 3 Prompt Guard

前序研究&#xff1a;实战解读&#xff1a;Llama 3 安全性对抗分析 近日&#xff0c;腾讯朱雀实验室又针对 Llama 3.1 安全性做了进一步解读。 2024年7月23日晚&#xff0c;随着Llama3.1的发布&#xff0c;Meta正式提出了“Llama系统”的概念&#xff0c;通过系统级的安全组件对…

谷粒商城实战笔记-62-商品服务-API-品牌管理-OSS整合测试

文章目录 一&#xff0c;Java中上传文件到阿里云OSS1&#xff0c;整合阿里云OSS2&#xff0c;测试上传文件 二&#xff0c;Java中整合阿里云OSS服务指南引言准备工作1. 注册阿里云账号2. 获取Access Key3. 添加依赖 实现OSS客户端1. 初始化OSSClient2. 创建Bucket3. 上传文件4.…

自定义 RAG 工作流:在 IDE 中结合 RAG 编排,构建可信的编码智能体

构建编码智能体并非一件容易的事。结合我们在 AutoDev、ArchGuard Co-mate、ChocoBuilder 等智能体项目的经验&#xff0c;我们开始思考在 Shire 语言中提供一种新的 RAG 工作流。结合我们先前构建的 IDE 基础设施&#xff08;代码生成、代码校验、代码执行等接口&#xff09;&…