本文主要是介绍记录一个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实现列表指定行数批量选中解决方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
