el-pagination自定义每页条数

实现效果：

思路：把选择每页条数的选择框换成可以输入和选择的选择框，将重新绘制的选择框和分页组件的功能结合起来，加上样式使它们好看就行了。

代码如下：

<template>
  <div class="">
    <div style="display: flex; justify-content: flex-end">
      <div style="margin-right: 16px">
        <span style="font-size: 14px"> 共{{ total }}条</span>
        <el-select
          size="small"
          style="width: 80px; margin: 0 6px"
          v-model="size"
          filterable
          allow-create
          default-first-option
        >
          <el-option
            v-for="(item, index) of options"
            :key="index"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
        <span style="font-size: 14px">条/页</span>
      </div>
      <el-pagination layout="prev, pager, next,jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: null,
      size: 10,
      total: 100,
      options: [
        {
          value: 10,
          label: 10,
        },
        {
          value: 20,
          label: 20,
        },
        {
          value: 50,
          label: 50,
        },
        {
          value: 100,
          label: 100,
        },
      ],
    };
  },
  methods: {},
};
</script>
<style lang='scss'>
</style>