Vue3 Element Plus 分页

<template>
  <div class="card">
    <el-card>
      <el-table :data="paginatedAdministrators" style="width: 100%;margin-top: 20px;">
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="department" label="挂号科室" />
        <el-table-column prop="date" label="挂号日期" />
        
        
        <el-table-column label="数量" width="100">
          <template #default="scope">
            <!-- 使用作用域插槽插入一个可编辑的输入框 -->
            <el-input v-model="scope.row.num" placeholder="请输入数量"    @blur="updateItem(scope.row)"  ></el-input>
          </template>
        </el-table-column>
        
        
        
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="state.patientInformation.length">
      </el-pagination>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive,ref,computed } from 'vue';



const state = reactive({
  patientInformation: [
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    },
    {
      username:'1',
      department:'2',
      date:'3'
    }
  ]

})

//分页
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示的数据条数
const totalAdministrators = computed(() => state.patientInformation.length); // 管理员总数，用于分页计算

// 计算属性，返回当前页应该显示的数据
const paginatedAdministrators = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = currentPage.value * pageSize.value;
  return state.patientInformation.slice(start, end);
});

// 处理状态改变的逻辑
const handleStatusChange = (row) => {
  // 这里可以发送请求到服务器更新状态，或者使用其他逻辑处理状态变化
  console.log(`Status changed for user ${row.name}:`, row.status);
  // 如果需要，可以显示一个消息提示

};

// 处理每页显示数量变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1; // 当每页数量改变时，回到第一页
};

// 处理当前页码变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};



</script>

<style scoped>
.card {
  margin: 0 5% 0 5%;
}
</style>