el-table多选选中下一个取消上一个

<template>
    <div class="table-container">
          <el-table :data="tableData" style="width: 100%" border ref="multipleTable" @selection-change="handleSelectionChange" @select="selectChange"
@row-click="handleRowClick" @select-all="selectAll">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="优先级" width="80" align="center" type="index"></el-table-column>
          <el-table-column label="属性描述" prop="shuxmsh" align="center"></el-table-column>
         </el-table>
    </div>
</template>
<script>
export default {
  data() {
    return {
      handleSelectionList: [],
      tableData: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.handleSelectionList = val
    },

    selectChange(selection, row) {     //选中复选框
      if (selection.length > 1) {
        const del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    handleRowClick(row, column, event) {     //选中行
      let table = this.$refs.multipleTable;
      if (table.selection.length >= 1 && table.selection[0].id !== row.id) {
        table.clearSelection(row);
        table.toggleRowSelection(row);
      } else {
        table.toggleRowSelection(row);
      }
    },
    selectAll(selection) {    //全选复选框
      if (selection.length > 1) {
        selection.length = 1
      }
    }
  }
}
</script>