<!-- 在table中设置一个ref,就可以使用表格的方法了 -->
<el-table
  :data="tableData2"
  border
  style="width: 100%"
  ref="checkTable"
  @selection-change="handleSelectionChange">
  <el-table-column
    type="selection"
    width="55">
  </el-table-column>
</el-table>
// method
// 处理表格数据,已还款的自动选上
  handleCheckData () {
    let table = this.tableData2 // 从后台获取到的数据
    table.forEach(item => {
      if (item.status === '已还款') {
        // toggleRowSelection可以切换表格行的选中状态,接收两个参数第一个是要切换的行,这里需要的对象格式,
        // 第二个参数是设置选中还是不选中,不传的话会取与原来相反的选择状态
        // 方法调用要等元素挂载才后才能执行,这里加一个判断,这个方法要放在数据获取后
        this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(item, true)
3、设置表格行为不可选
通过selectable参数可以手动设置某些表格行未不可选择
<el-table
  :data="tableData2"
  border
  style="width: 100%"
  ref="checkTable"
  @selection-change="handleSelectionChange">
  <!-- 在type="selection的列里添加selectable参数,通过函数返回true或false可以设置是否可选" -->
  <el-table-column
    type="selection"
    :selectable="handleDisable"
    width="55">
  </el-table-column>
</el-table>
// method
// 处理表格数据,未还款的默认不能勾选
// 有两个参数返回,表格的每一行对象和当前索引
handleDisable(row, index) {
  // 函数需要一个返回值,true为可选,false为不可选择
  if (row.status === '未还款') {
    return false
  } else {
    return true
  :row-key="handleReserve"
  @selection-change="handleSelectionChange">
  <!-- 在type="selection的列里添加reserve-selection参数,true为保留数据,默认为false不保留 -->
  <el-table-column
    type="selection"
    reserve-selection
    width="55">
  </el-table-column>
</el-table>
// method
// 表格数据处理,保存上一页选中的数据
// 返回的参数是每一行的值,需要指定表格数据的唯一值,一般是id
handleReserve (row) {
  return row.id
补充内容:
select的reserve-selection和toggleRowSelection一起用时,比如下面的场景,选择左边表格数据,右边对应展示列表,点击右边的列表也能控制左边的表格选中状态
这种场景会出现一个问题,当你在第一页选中数据,跳转到第二页又选择数据,再跳转回第一页时,删除第一页选中的数据会不能取消选中状态,具体如图
      <ul class="list">
        <li v-for="(item, index) in list" :key="index" class="item">
          {{ item.name }} <el-button type="text" @click="removeName(item)">删除</el-button>
 methods: {
   // 表格选中
    handleSelectionChange(val) {
      console.log('选中的表格', val)
      this.list = val
    // 删除,取消表格选中
    removeName(item) {
      this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(item, false)
出现这种问题的原因是因为当你从第二页跳转回第一页,你的tableData是从后台从新获取并赋值的,在当前页取消选中状态时,列表里的item和左边表格tableData里的数据虽然值一样,但是此时他们指向的内存地址不一样.所以,不能再传列表里的item了
handleSelectionChange(val) {
      console.log('选中的表格', val)
      this.list = val
    // 删除,取消表格选中
    removeName(item) {
      const arr = this.tableData.filter(sub => { return sub.id === item.id }) // 取消当前表格里的选中状态时,用表格里的数据
      const row = arr.length ? arr[0] : item
      // console.log(item, row)
      this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(row, false)