在iview中取消选中时删除行

<template>
  <div>
    <Table :data="tableData" :columns="columns" :selection="true" @selection-change="handleSelectionChange"></Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20 },
        { name: 'Jane', age: 25 },
        { name: 'Tom', age: 30 }
      ],
      columns: [
        { title: 'Name', key: 'name' },
        { title: 'Age', key: 'age' }
      ]
    };
  },
  methods: {
    handleSelectionChange(selection) {
      // 获取取消选中的行数据
      const unselectedRows = selection.filter(row => !row.selected);
      
      // 删除取消选中的行数据
      unselectedRows.forEach(row => {
        const index = this.tableData.indexOf(row);
        this.tableData.splice(index, 1);
      });
      
      // 刷新数据源
      this.$nextTick(() => {
        this.$refs.table.refresh();
      });
    }
  }
};
</script>