记录一个vue,ele-ui实现列表指定行数批量选中解决方法

本文主要是介绍记录一个vue,ele-ui实现列表指定行数批量选中解决方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这个问题卡了一天,试了好多方法总算试出来了:
 

<template><div><!-- 功能区卡片 --><el-card class="mb-4"><el-row class="mb-1"><el-col :span="12">请输入想勾选的专利起止条数:</el-col></el-row><!-- 输入框及确认按钮 --><el-row><el-col :span="4" class="ml-2"><el-input v-model="start" placeholder="请输入想勾选专利的起始行"></el-input></el-col><el-col :span="4" class="ml-2"><el-input v-model="end" placeholder="请输入想勾选专利的结束行"></el-input></el-col><el-col :span="4" class="ml-2"><el-button type="primary" plain @click="selectSpecifiedPatents">确认</el-button></el-col></el-row><el-row class="mb-2"><el-col :span="12"><el-button type="primary" plain @click="distributePatents">提交分发</el-button><el-button type="warning" plain @click="clearSelection">取消勾选</el-button></el-col></el-row></el-card><!-- 左右两个卡片 --><el-row :gutter="12"><!-- 左侧专利列表 --><el-col :span="12"><el-card class="mb-4"><!-- 添加全选按钮 --><el-table :data="patents" stripe height="400" ref="patentTable"><el-table-column type="index" label="全选"></el-table-column><el-table-column type="selection" width="50" ></el-table-column><el-table-column prop="patent_name" label="专利名称" class="title"></el-table-column></el-table></el-card></el-col><!-- 右侧专家列表 --><el-col :span="12"><el-card class="mb-4"><!-- 添加全选按钮 --><el-table :data="experts" stripe height="400"><el-table-column type="index" label="全选"></el-table-column><el-table-column type="selection" width="50" v-model="selectedExperts"></el-table-column><el-table-column prop="username" label="专家名称" class="title"></el-table-column></el-table></el-card>  </el-col></el-row></div>
</template><script>
import axios from 'axios';export default {data() {return {start: '',end: '',patents: [],experts: [],selectedPatents: [], // 存储选中的专利IDselectedExperts: [], // 存储选中的专家ID};},created() {this.fetchData();},methods: {fetchData() {axios.get('http://localhost:8888/app/get_patent_and_expert_list/').then(response => {this.patents = response.data.patents.map(patent => ({ ...patent, checked: false }));this.experts = response.data.experts;}).catch(error => {console.error('Error fetching data:', error);});},selectSpecifiedPatents() {const startIdx = parseInt(this.start) - 1;const endIdx = parseInt(this.end);if (!isNaN(startIdx) && !isNaN(endIdx) && startIdx >= 0 && endIdx > startIdx && endIdx <= this.patents.length) {this.$refs.patentTable.clearSelection(); // 清除之前的选中状态const selectedRows = this.patents.slice(startIdx, endIdx); // 获取起始和结束位置之间的专利行selectedRows.forEach(row => {this.$refs.patentTable.toggleRowSelection(row, true); // 将专利行设为选中状态});} else {alert('请输入有效的起始和结束序号!');}},clearSelection() {this.selectedPatents = [];this.selectedExperts = [];// 取消所有专利的选中状态this.patents = this.patents.map(patent => ({...patent,checked: false}));},distributePatents() {axios.post('http://localhost:8888/app/distribute_patents/', {selected_patents: this.selectedPatents,selected_experts: this.selectedExperts,}).then(response => {alert('分发成功!');}).catch(error => {console.error('Error distributing patents:', error);});},}
}
</script><style scoped>
.mb-4 {margin-bottom: 20px;
}
.mb-1 {margin-bottom: 20px;
}
.mb-2 {margin-top: 20px;
}
.ml-2 {margin-right: 10px;
}.title {font-size: 16px;
}
</style>

这篇关于记录一个vue,ele-ui实现列表指定行数批量选中解决方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/837132

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中反转字符串的常见方法小结

《Python中反转字符串的常见方法小结》在Python中,字符串对象没有内置的反转方法,然而,在实际开发中,我们经常会遇到需要反转字符串的场景,比如处理回文字符串、文本加密等,因此,掌握如何在Pyt... 目录python中反转字符串的方法技术背景实现步骤1. 使用切片2. 使用 reversed() 函

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola