如何给所有element-plus分页加一个属性

您可以通过在项目中创建一个全局的分页组件来实现给所有element-plus分页加一个属性的功能。具体步骤如下：

1. 在项目中创建一个全局的分页组件，例如命名为GlobalPagination.vue。
2. 在GlobalPagination.vue中引入element-plus的分页组件，并将其封装为一个新的组件。
3. 在新的组件中添加您需要的属性，并将其传递给element-plus的分页组件。
4. 在项目中使用新的全局分页组件代替element-plus的默认分页组件即可。

以下是示例代码，您可以根据自己的需求进行修改：

<template>
  <el-pagination
    :page-size="pageSize"
    :total="total"
    :current-page.sync="currentPage"
    :layout="layout"
    :prev-text="prevText"
    :next-text="nextText"
    :disabled="disabled"
    :hide-on-single-page="hideOnSinglePage"
    :page-count="pageCount"
    :pager-count="pagerCount"
    :popper-class="popperClass"
    :prev-ellipsis="prevEllipsis"
    :next-ellipsis="nextEllipsis"
    :background="background"
    :page-sizes="pageSizes"
    :popper-append-to-body="popperAppendToBody"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @prev-click="handlePrevClick"
    @next-click="handleNextClick"
  />
</template>

<script>
import { ElPagination } from "element-plus";

export default {
  name: "GlobalPagination",
  components: {
    ElPagination,
  },
  props: {
    pageSize: Number,
    total: Number,
    currentPage: Number,
    layout: String,
    prevText: String,
    nextText: String,
    disabled: Boolean,
    hideOnSinglePage: Boolean,
    pageCount: Number,
    pagerCount: {
      type: Number,
      default: 7,
    },
    popperClass: String,
    prevEllipsis: {
      type: Boolean,
      default: true,
    },
    nextEllipsis: {
      type: Boolean,
      default: true,
    },
    background: Boolean,
    pageSizes: Array,
    popperAppendToBody: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("size-change", val);
    },
    handleCurrentChange(val) {
      this.$emit("current-change", val);
    },
    handlePrevClick(val) {
      this.$emit("prev-click", val);
    },
    handleNextClick(val) {
      this.$emit("next-click", val);
    },
  },
};
</script>

在项目中使用GlobalPagination组件代替element-plus的默认分页组件即可。

<template>
  <div>
    <GlobalPagination
      :page-size="pageSize"
      :total="total"
      :current-page.sync="currentPage"
      :layout="layout"
      :prev-text="prevText"
      :next-text="nextText"
      :disabled="disabled"
      :hide-on-single-page="hideOnSinglePage"
      :page-count="pageCount"
      :pager-count="pagerCount"
      :popper-class="popperClass"
      :prev-ellipsis="prevEllipsis"
      :next-ellipsis="nextEllipsis"
      :background="background"
      :page-sizes="pageSizes"
      :popper-append-to-body="popperAppendToBody"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    />
  </div>
</template>

<script>
import GlobalPagination from "@/components/GlobalPagination.vue";

export default {
  components: {
    GlobalPagination,
  },
  data() {
    return {
      pageSize: 10,
      total: 100,
      currentPage: 1,
      layout: "total, sizes, prev, pager, next, jumper",
      prevText: "<",
      nextText: ">",
      disabled: false,
      hideOnSinglePage: false,
      pageCount: 10,
      pagerCount: 7,
      popperClass: "",
      prevEllipsis: true,
      nextEllipsis: true,
      background: false,
      pageSizes: [10, 20, 30, 40],
      popperAppendToBody: true,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handlePrevClick(val) {
      console.log(`上一页: ${val}`);
    },
    handleNextClick(val) {
      console.log(`下一页: ${val}`);
    },
  },
};
</script>