苏州web:bug修改

unknown

2023-10-24 c75e9ccac1c92b1f2318c79a8d76c0e3d4da0000

 web/src/components/element/Pagination.vue

@@ -1,78 +1,82 @@
<template>
  <div class="pagination-container">
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 30]"
      :total="total" :current-page="pageNum" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </div>
</template>
<script>
export default {
  name: "pagination",
  data() {
    return {};
  },
  props: {
    // 总页数
    total: {
      type: Number,
    },
    // 当前页
    pageNum: {
      type: Number,
    },
    // 每页显示条数
    pageSize: {
      type: Number,
    },
  },
  methods: {
    // 当前页码变化
    handleCurrentChange(val) {
      this.$emit("change-page-num", val);
    },
    //  每页查看条数变化
    handleSizeChange(val) {
      this.$emit("change-page-size", val);
    },
  },
  // watch: {
  //   pageSize: {
  //     // immediate: true,
  //     handler(newValue, oldValue) {
  //       this.page._pageSize = this.newValue;
  //       console.log("pageSize", newValue, oldValue);
  //     },
  //   },
  //   pageNum: {
  //     // immediate: true,
  //     handler(newValue, oldValue) {
  //       this.page._currentPage = newValue;
  //       console.log("pageNum", newValue, oldValue);
  //     },
  //   },
  // },
};
</script>
<style lang="scss" scoped>
// 主体底部样式
::v-deep.el-pagination .btn-prev,
::v-deep.el-pagination .btn-next,
::v-deep.el-pagination .el-pager li {
  background-color: rgba(20, 25, 58, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 400;
  color: #E2E4E9;
  border-radius: 4px;
}

::v-deep.el-pagination .el-pager li:not(.disabled).active {
  color: #fff;
  border: 1px solid #39B5FE;
  background-color: #0B3562;
  font-weight: 400;
}

.pagination-container {
  margin-top: 30px;
}
<template>

  <div class="pagination-container">

    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 30]"

      :total="total" :current-page="pageNum" :page-size="pageSize"

      layout="total, sizes, prev, pager, next, jumper"></el-pagination>

  </div>

</template>

<script>

export default {

  name: "pagination",

  data() {

    return {};

  },

  props: {

    // 总页数

    total: {

      type: Number,

    },

    // 当前页

    pageNum: {

      type: Number,

    },

    // 每页显示条数

    pageSize: {

      type: Number,

    },

  },

  methods: {

    // 当前页码变化

    handleCurrentChange(val) {

      this.$emit("change-page-num", val);

    },

    //  每页查看条数变化

    handleSizeChange(val) {

      this.$emit("change-page-size", val);

    },

  },

  // watch: {

  //   pageSize: {

  //     // immediate: true,

  //     handler(newValue, oldValue) {

  //       this.page._pageSize = this.newValue;

  //       console.log("pageSize", newValue, oldValue);

  //     },

  //   },

  //   pageNum: {

  //     // immediate: true,

  //     handler(newValue, oldValue) {

  //       this.page._currentPage = newValue;

  //       console.log("pageNum", newValue, oldValue);

  //     },

  //   },

  // },

};

</script>

<style lang="scss" scoped>

.el-pagination {

  text-align: right;

}



// 主体底部样式

::v-deep.el-pagination .btn-prev,

::v-deep.el-pagination .btn-next,

::v-deep.el-pagination .el-pager li {

  background-color: rgba(20, 25, 58, 0.4);

  border: 1px solid rgba(255, 255, 255, 0.12);

  font-weight: 400;

  color: #E2E4E9;

  border-radius: 4px;

}



::v-deep.el-pagination .el-pager li:not(.disabled).active {

  color: #fff;

  border: 1px solid #39B5FE;

  background-color: #0B3562;

  font-weight: 400;

}



.pagination-container {

  margin: 30px 0;

}

</style>