数组完成分页和分割数组一页显示几条数据，点击左右按钮轮播数据

点击新建，车辆人员信息模块增加一条，下面的分页多一页。每页的车辆相关人员信息只能显示3条，点击右中侧的按钮可以查看第二页车辆相关人员信息。

<template>
  <div class="car_personnel">
    <div class="car_personnel_info">
      <div class="add_info_btn" @click="carPersonnelClick">
        <img
          class="addimg"
          src="../../../assets/images/Icon_xinjian&daochu@1x.png"
        />新建信息
      </div>
      <div class="info_content">
        <div class="content">
          <div class="top_title flex justify_between">
            <p>车辆信息</p>
          </div>
          <div class="info">
            <div>
              车辆类型：<span>{{ currentVehicle.type }}</span>
            </div>
            <div>
              车牌号：<span>{{ currentVehicle.carNum }}</span>
            </div>
            <div>
              重点车辆：<span :class="currentVehicle.carKey ? 'orange' : ''">{{
                currentVehicle.carKey ? "是" : "否"
              }}</span>
            </div>
            <div class="info_btn">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit-outline"
                @click="editCarInfo()"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteCarInfo()"
              ></el-button>
            </div>
          </div>
        </div>
        <div class="content_personnel">
          <div class="top_title flex justify_between">
            <div class="flex">
              <p>车辆相关人员信息</p>
              <div class="top_title_data flex">
                <div>
                  受伤：<span>{{ personnelSummary.injured }}</span>
                </div>
                <div>
                  死亡：<span>{{ personnelSummary.dead }}</span>
                </div>
              </div>
            </div>
            <div class="underline_button">
              <span
                class="el-icon-caret-left"
                @click="showPreviousPersonnel"
              ></span>
              <span
                class="el-icon-caret-right"
                @click="showNextPersonnel"
              ></span>
            </div>
          </div>
          <div
            class="info"
            v-for="personnel in displayedPersonnel"
            :key="personnel.id"
          >
            <div>
              身份：<span>{{ personnel.position }}</span>
            </div>
            <div>
              姓名：<span>{{ personnel.name }}</span>
            </div>
            <div>
              重点人员：<span :class="personnel.peoKey ? 'orange' : ''">{{
                personnel.peoKey ? "是" : "否"
              }}</span>
            </div>
            <div class="info_btn">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit-outline"
                @click="editCarPersonnel()"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteCarPersonnel()"
              ></el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="car_pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="vehicleData.length"
          :current-page="currentPageCar"
          :page-size="1"
          @current-change="handlePageCar"
          next-text="下一页"
          prev-text="上一页"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 车辆信息
      vehicleData: [
        {
          id: 1,
          type: "小型客车",
          carNum: "新F 1234Z",
          carKey: 1, // 重点车辆
          people: [
            {
              id: 1,
              position: "驾驶员",
              name: "伊斯拉赫曼",
              peoKey: 1,
            },
            {
              id: 2,
              position: "乘客",
              name: "伊斯玛伊尔·阿卜杜拉赫曼",
              peoKey: 1,
            },
          ],
        },
        {
          id: 2,
          type: "小车",
          carNum: "新F 1234Z",
          carKey: 1, // 重点车辆
          people: [
            {
              id: 1,
              position: "驾驶员",
              name: "伊斯玛伊尔·阿卜杜拉赫曼",
              peoKey: 1,
            },
            {
              id: 2,
              position: "驾驶员",
              name: "伊曼",
              peoKey: 0,
            },
          ],
        },
      ],
      // 人员概要信息
      personnelSummary: {
        injured: 0,
        dead: 0,
      },
      currentPageCar: 1, // 车辆分页当前页码
      personnelStartIndex: 0, // 当前人员显示的起始索引
      personnelPageSize: 3, // 每页显示人员数量
    };
  },
  computed: {
    // 当前车辆信息
    currentVehicle() {
      // 如果 currentPageCar 超出范围，返回一个默认值，防止 undefined 错误
      if (
        this.vehicleData.length === 0 ||
        this.currentPageCar < 1 ||
        this.currentPageCar > this.vehicleData.length
      ) {
        return {
          type: "未知",
          carNum: "未知",
          carKey: 0,
          personnelList: [],
        };
      }
      return this.vehicleData[this.currentPageCar - 1];
    },
    // 当前显示的车辆人员信息（分页）
    displayedPersonnel() {
      const start = this.personnelStartIndex;
      const end = start + this.personnelPageSize;
      return this.currentVehicle.people.slice(start, end);
    },
  },
  methods: {
    // 车辆人员分页按钮
    handlePageCar(page) {
      this.currentPageCar = page;
      this.personnelStartIndex = 0;
    },
    // 切换到上一组人员
    showPreviousPersonnel() {
      if (this.personnelStartIndex > 0) {
        this.personnelStartIndex -= this.personnelPageSize;
      }
    },
    // 切换到下一组人员
    showNextPersonnel() {
      if (
        this.personnelStartIndex + this.personnelPageSize <
        this.currentVehicle.people.length
      ) {
        this.personnelStartIndex += this.personnelPageSize;
      }
    },
    // 新建-车辆及相关人员信息
    carPersonnelClick() {
      let newObj = {
        id: 0,
        people: [
          {
            id: 0,
          },
        ],
      };
      this.vehicleData.unshift(newObj);
      this.personnelStartIndex = 0;
    },
  },
};
</script>

<style>
</style>