<template>
	<el-table ref="myTable" :data="bikeList" height="260px" @selection-change="handleSelectionChange" :row-key="getRowKeys" :reserve-selection="true">
		<el-table-column type="selection" width="55" align="center" />
		<el-table-column label="ID" align="center" prop="id" />
	</el-table>
</template>
<script setup name="bikeList" lang="ts">

import { listBike} from '@/api/bike';
import { BikeVO } from '@/api/bike/types';
const myTable= ref(ElTable);
const bikeList = ref<BikeVO[]>([]);
const ids = ref<Array<string | number>>([]);

/** 多选框选中数据 */
const handleSelectionChange = (selection: BikeVO[]) => {
  ids.value = selection.map((item) => item.id);
};

const getRowKeys=(row:any)=> {
  return row.id
}

const initSelectionRow = async () => {
  nextTick(() => {
    myTable.value.clearSelection();
    bikeList.value.forEach((row) => {
      if(ids.value.includes(row.id)){
          //this.$refs.myTable.toggleRowSelection(row, true); //Vue2写法
          myTable.value.toggleRowSelection(row, true);  //Vue3写法
      }
    });
  });
}

const getList = async () => {
  const res = await listBike({});
  bikeList.value = res.rows;
  initSelectionRow();
}
onMounted(() => {
  getList()
})
</script>