vue+ts实现表格的单选，选中当前页，选中所有页

首先,创建一个新的Vue 3项目,并安装必要的依赖:

vue create student-management-system
cd student-management-system
npm install element-plus axios

然后,创建以下文件结构:

src/
  components/
    StudentTable.vue
  types/
    student.ts
  services/
    api.ts
  App.vue
  main.ts

1. 在 src/types/student.ts 中定义学生类型:

export interface Student {
  id: number;
  name: string;
  age: number;
  grade: string;
}

2. 在 src/services/api.ts 中创建API服务:

import axios from 'axios';
import { Student } from '@/types/student';

const API_URL = 'http://your-api-url.com/api';

export const fetchStudents = async (page: number, pageSize: number, filters: any) => {
  const response = await axios.get(`${API_URL}/students`, {
    params: { page, pageSize, ...filters }
  });
  return response.data;
};

export const sendSelectedStudents = async (selectedStudents: Student[]) => {
  const response = await axios.post(`${API_URL}/selected-students`, selectedStudents);
  return response.data;
};

3. 在 src/components/StudentTable.vue 中创建学生表格组件:

<template>
  <div>
    <el-form :inline="true" :model="filters" class="demo-form-inline">
      <el-form-item label="Name">
        <el-input v-model="filters.name" placeholder="Name" />
      </el-form-item>
      <el-form-item label="Grade">
        <el-select v-model="filters.grade" placeholder="Grade">
          <el-option label="Grade 1" value="1" />
          <el-option label="Grade 2" value="2" />
          <el-option label="Grade 3" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">Search</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="students"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column prop="age" label="Age" width="120" />
      <el-table-column prop="grade" label="Grade" width="120" />
    </el-table>

    <div style="margin-top: 20px">
      <el-button @click="toggleSelection()">Clear selection</el-button>
      <el-button @click="selectCurrentPage">Select Current Page</el-button>
      <el-button @click="selectAllPages">Select All Pages</el-button>
      <el-button type="primary" @click="sendSelectedData">Send Selected Data</el-button>
    </div>

    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import { fetchStudents, sendSelectedStudents } from '@/services/api';
import { Student } from '@/types/student';

const students = ref<Student[]>([]);
const multipleTable = ref<InstanceType<typeof ElTable>>();
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const selectedStudents = ref<Student[]>([]);

const filters = reactive({
  name: '',
  grade: '',
});

const fetchData = async () => {
  try {
    const { data, total: totalCount } = await fetchStudents(currentPage.value, pageSize.value, filters);
    students.value = data;
    total.value = totalCount;
  } catch (error) {
    console.error('Error fetching students:', error);
    ElMessage.error('Failed to fetch students');
  }
};

const handleSelectionChange = (val: Student[]) => {
  selectedStudents.value = val;
};

const toggleSelection = (rows?: Student[]) => {
  if (rows) {
    rows.forEach(row => {
      multipleTable.value?.toggleRowSelection(row);
    });
  } else {
    multipleTable.value?.clearSelection();
  }
};

const selectCurrentPage = () => {
  students.value.forEach(row => {
    multipleTable.value?.toggleRowSelection(row, true);
  });
};

const selectAllPages = async () => {
  try {
    const { data } = await fetchStudents(1, total.value, filters);
    toggleSelection(data);
  } catch (error) {
    console.error('Error fetching all students:', error);
    ElMessage.error('Failed to select all pages');
  }
};

const sendSelectedData = async () => {
  try {
    await sendSelectedStudents(selectedStudents.value);
    ElMessage.success('Selected data sent successfully');
  } catch (error) {
    console.error('Error sending selected data:', error);
    ElMessage.error('Failed to send selected data');
  }
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  fetchData();
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  fetchData();
};

onMounted(() => {
  fetchData();
});
</script>

4. 在 src/App.vue 中使用 StudentTable 组件:

<template>
  <div id="app">
    <h1>Student Management System</h1>
    <StudentTable />
  </div>
</template>

<script lang="ts" setup>
import StudentTable from '@/components/StudentTable.vue';
</script>

5. 在 src/main.ts 中初始化 Vue 应用和 Element Plus:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓