错题本分页

luohairen

2024-11-11 517ada59580a84035d2373034f7b77c0bdf044c5

 src/views/wrong-list/index.vue

@@ -9,11 +9,21 @@
            <div class="card-wrapper w-full h-full flex flex-col px-8 box-border">
              <div class="card-header flex justify-between items-center shrink-0">
                <div class="header-search flex items-center">
                  <el-input v-model="searchText" placeholder="请输入考试名称" :prefix-icon="Search" maxlength="20" @input="searchData"/>
                  <el-button type="primary" class="ml-4" @click="searchData">搜索</el-button>
<!--                  <el-input v-model="pageParam.title" placeholder="请输入题目" maxlength="20"/>-->
<!--                  <el-select v-model="pageParam.questionType" placeholder="请选择题型" @change="searchData">-->
<!--                    <el-option label="单选题" value="1"></el-option>-->
<!--                    <el-option label="多选题" value="2"></el-option>-->
<!--                    <el-option label="判断题" value="3"></el-option>-->
<!--                    <el-option label="填空题" value="4"></el-option>-->
<!--                    <el-option label="解答题" value="5"></el-option>-->
<!--                    <el-option label="语音题" value="6"></el-option>-->
<!--                    <el-option label="计算题" value="7"></el-option>-->
<!--                    <el-option label="分析题" value="8"></el-option>-->
<!--                  </el-select>-->
<!--                  <el-input v-model="pageParam.examName" placeholder="请输入试卷名称" maxlength="20"/>-->
<!--                  <el-button type="primary" class="ml-4" @click="searchData">搜索</el-button>-->
                </div>
              </div>

              <div class="card-main flex-1 my-5 relative">
                <div class="main-content absolute top-0 bottom-0 left-0 right-0" v-loading="loading">
                  <DataList :dataList="dataList"></DataList>
@@ -21,10 +31,10 @@
              </div>

              <div class="card-footer flex justify-center mb-7 shrink-0">
                <el-pagination background layout="prev, pager, next" :total="dataList.length"
                               :default-page-size="20"
                               :currentPage="currentIndex"
                               :hide-on-single-page="true"
                <el-pagination background layout="prev, pager, next"
                               :total="pageParam.total"
                               :page-size="10"
                               :current-page="pageParam.pageIndex"
                               @current-change="handleCurrentChange"/>
              </div>
            </div>
@@ -37,41 +47,54 @@

<script setup>
import { ref } from 'vue';

import NormalHeader from '@/components/NormalHeader/index.vue';
import DataList from './data-list/index.vue';
import { getWrongList } from '@/api/modules/wrong.js';
import { page } from '@/api/modules/wrong.js';


const searchText = ref('');
const currentIndex = ref(1);

const dataList = ref([]);

const loading = ref(false);
const currentData = ref([]);

// 分页参数
const pageParam = {
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  title: '',
  questionType: null,
  examName: ''
};



const getData = () => {
  loading.value = true;
  getWrongList({ examName: searchText.value }).then(res => {
    dataList.value = res.data;
  page(pageParam).then(res => {
    dataList.value = res.data.list;
    pageParam.total = res.data.total;
    loading.value = false;
  }).catch(err => {
    loading.value = false;
  });
};
// 页面切换
const handleCurrentChange = (pageIndex) => {
  pageParam.pageIndex = pageIndex; // 更新页码
  getData(); // 获取数据
}


getData();


const searchData = () => {
  getData();
};
}

const handleClick = (tab, event) => {
};

const handleCurrentChange = (val) => {
  getData();
}
</script>

<style lang="scss" scoped>