页码的条数无法显示 显示0条数据

页码的条数无法显示 显示0条数据 total也写了 就算是检查不出有什么问题 初步判断是不是this.noticeList()的问题?

img

img

img

img

你的初始的total的总数可以写 null,然后赋值的时候看下是字符串还是数值类型

你现在贴出来的代码显示total就是0,能截一下你的过去数据的那个方法吗?noticeList()


<template>
  <div class="box">
    <div class="big-div">
      <img src="../assets/img/navs.png" id="imgs" />
      <img src="../assets/img/head.png" id="logos" />
      <div id="nav">
        <el-button id="logns" @click="login" v-if="!$store.state.sessionId"
          ><span id="btn-color">登录</span></el-button
        >
        <el-button id="lognes" @click="register" v-if="!$store.state.sessionId"
          ><span id="btn-color">注册</span></el-button
        >
        <!-- <el-button id="logns" @click="logout" v-if="$store.state.sessionId"
          ><span id="btn-color">退出登录</span></el-button
        > -->
        <div class="contents">
          <i class="iconfont icon-CRMzititubiao-" style="margin-left: 70px"></i
          >招聘公告
          <!-- <button id="mores" @click="more">更多</button> -->
          <el-table
            style="width: 80%; height: 300px; margin-left: 70px"
            :data="noticeList"
            stripe
          >
            <el-table-column
              label="通知名称"
              prop="recruitName"
            ></el-table-column>
            <el-table-column
              label="编辑时间"
              prop="recruitDate"
            ></el-table-column>
            <el-table-column
              label="发布时间"
              prop="releaseDate"
            ></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button type="text" @click="showNoticeDetail(scope.row)"
                  >查看详情</el-button
                >
                <el-dialog title="详情信息" :visible.sync="dialogTableVisible">
                  <!-- 富文本编辑器组件 -->
                  <quill-editor
                    v-model="recruitDetail"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)"
                  >
                  </quill-editor>
                  <!-- <el-input
                    id="texarea"
                    type="textarea"
                    :rows="5"
                    v-model="recruitDetail"
                    style="resize: none"
                    v-html="recruitDetail"
                  /> -->
                  <!-- <div>{{ recruitDetail }}</div> -->
                  <!-- 富文本编辑器组件 -->
                  <el-table :data="fileList" style="width: 100%; height: 200px">
                    <el-table-column
                      prop="fileName"
                      label="文件名"
                      style="width: 30%"
                      @click="text"
                    >
                    </el-table-column>
                    <!-- <el-table-column
                      prop="fileUrl"
                      label="文件路径"
                      style="width: 40%"
                    >
                      <template slot-scope="scope">
                        <a
                          @click="downloadFile(scope.row.fileUrl)"
                          href="javascript:;"
                          target="_blank"
                          >{{ scope.row.fileUrl }}</a
                        >
                      </template>
                    </el-table-column> -->
                    <el-table-column
                      prop="fileSize"
                      label="大小"
                      style="width: 40%"
                    >
                    </el-table-column>
                  </el-table>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页区域 -->
          <el-pagination
            style="margin-left: 70px; margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
          <!-- 分页区域 -->
          <!-- <div class="content_2">
            <i class="el-icon-message-solid" style="margin-left: 70px"></i>
            <span id="announcement">招聘结果通知</span>
            <button id="more" @click="more">更多</button> 
            <el-table style="width: 80%; margin-left: 70px; height: 300px">
              <el-table-column
                prop="date"
                label="   广东省省直机关及其直属机构2021年考试录用公务员面试、体检公告"
                width="1200"
              >
                <template slot="header" slot-scope="scope">
                  <i class="el-icon-menu"></i>
                </template>
              </el-table-column>
              <el-table-column prop="date"></el-table-column>
            </el-table>
          </div>  -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiPost } from "../network/request";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

// import $ from "jquery";
// import niceScroll from "jquery.nicescroll";

export default {
  name: "Home",
  components: { quillEditor },
  data() {
    return {
      total: 0,
      id: "",
      //通知详情
      recruitDetail: "",
      fileList: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      //动态数据
      noticeList: [],
      //控制对话框的显示与隐藏
      dialogVisible: false,
      content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
      editorOption: {},
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: [],
        },
      },
      //页码
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      queryInfo: {
        query: "",
        //当前页数
        pagenum: 1,
        //当前每页显示多少条数据
        pagesize: 2,
      },
    };
  },
  mounted() {
    //公告列表数据获取
    apiPost("getNoticeVouchList.do_", {
      isRelease: "1",
    }).then((res) => {
      console.log(res);
      // this.total = res.data.total;
      this.noticeList = res.data.noticeList;
    });
  },
  destroyed() {
    window.removeEventListener("popstate", this.goBack, false);
  },
  methods: {
    text(id) {
      console.log(id);
    },
    downloadFile(filePath) {
      //后台地址,生产环境需要改,最好改为配置
      const basepath = "http://localhost:8080" + filePath;
      const a = document.createElement("a");
      a.href = basepath; //图片地址
      a.download = basepath; //图片名及格式
      document.body.appendChild(a);
      a.click();
    },
    handleClose(done) {
      this.$confirm("确认关闭?")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    login() {
      this.$router.push({
        path: "/login",
        query: {},
      });
    },
    register() {
      this.$router.push({
        path: "/register",
        query: {},
      });
    },
    //更多按钮
    more: function () {},
    showNoticeDetail(item) {
      //通知详情列表
      this.dialogTableVisible = true;
      let res = {
        recruitDetail: "",

        fileList: [     
        ],
      };
      this.recruitDetail = res.recruitDetail;
      this.fileList = res.fileList;

      console.log(item.iD);
      apiPost("getNoticeById.do", { id: item.iD }).then(
        (res) => {
          console.log(JSON.stringify(res));
          if (res.isOk == "Y") {
            this.recruitDetail = res.data.recruitNotice.recruitDetail;
            this.fileList = res.data.recruitNotice.fileList;
          }
        }
      );
    },
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.noticeList();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.noticeList();
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
};
</script>