记录一个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: [], // 存储选中的专利ID
      selectedExperts: [], // 存储选中的专家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>