vue2 element UI 与 vue3 elementPlus 二次封装分页

像我这样优秀的人~

已于 2024-04-19 09:28:32 修改

阅读量287

点赞数 8

分类专栏：基础学习文章标签： ui vue.js javascript

于 2024-04-18 16:37:42 首次发布

本文链接：https://blog.csdn.net/vdjskshvd/article/details/137926970

版权

基础学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了Vue2中使用ElementUI的分页组件`Pagination.vue`的用法，以及在Vue3中升级到elementPlus后，分页组件的更新，包括v-model绑定和计算属性的使用。

摘要由CSDN通过智能技术生成

vue2 element UI 成果：

分页组件 /components/Pagination.vue

<template>
  <div>
    <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="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      required: true,
      default: 10,
    },
    currentPage: {
      type: Number,
      required: true,
      default: 1,
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("update:pageSize", val);
    },
    handleCurrentChange(val) {
      this.$emit("update:currentPage", val);
    },
  },
};
</script>

<style scoped lang="scss"></style>

父组件 /index.vue

    <PaginationVue
      :currentPage.sync="page.currentPage"
      :total="page.total"
      :pageSize.sync="page.pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></PaginationVue>

<script>
import PaginationVue from "@/components/Pagination.vue";
export default {
  components: { PaginationVue },
  data() {
    return {
      page: {
        total: 1000,
        pageSize: 10,
        currentPage: 1,
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
    },
  },
};
</script>

vue3 elementPlus 成果：

分页组件 /components/Pagination.vue

<template>
  <div class="pagination-container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="->,sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-if="total !== 0"
    />
  </div>
</template>

<script setup>
import { ref, toRefs, computed } from "vue";

const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
});

const emits = defineEmits(["update:currentPage", "update:pageSize"]);
const { total } = toRefs(props);
const currentPage = computed({
  get() {
    return props.currentPage;
  },
  set(val) {
    return emits("update:currentPage", val);
  },
});
const pageSize = computed({
  get() {
    return props.pageSize;
  },
  set(val) {
    return emits("update:pageSize", val);
  },
});

const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val) => {
  emits("update:pageSize", val);
};
const handleCurrentChange = (val) => {
  emits("update:currentPage", val);
};
</script>

<style scoped lang="scss">
.pagination-container {
  margin-top: 50px;
}
</style>

父组件 /index.vue

  <Pagination
    v-model:total="total"
    v-model:currentPage="currentPage"
    v-model:pageSize="pageSize"
    @update:currentPage="getList"
    @update:pageSize="getList"
  ></Pagination>


<script setup>
import { ref } from "vue";
import Pagination from "@/components/Pagination.vue";

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const getList = async () => {
  const res = await getAllAlarm({
    id: cid,
    page: currentPage.value,
    pageSize: pageSize.value,
  });
  tableData.value = res?.list;
  total.value = res?.total;
};
</script>