Element-ui分页组件定制文本内容

效果展示图

tablepage.png

怎么解决element-ui的定制问题

• 第一步：先看插件本身能不能实现。
• 第二步：不能实现看这个问题如何转述为程序语言。
• 第三步：解决这个问题。

实战来做：

• 插件没有提供修改文本的方式
• 这个问题转述程序语言就是：如何修改元素中的文本内容。
• 很明显，通过js就能找到这个元素，并修改元素内容。

具体步骤：

第一步：确定元素，看其唯一类名或者ID，总之看dom结构找到用js找到元素的方法。

jump.png
total.png

找到了元素就简单了，在mounted钩子里直接用js修改呗。

具体代码：

400只是我写死的一个数字，你可以替换为你的total定义字段。

mounted(){
    let jump = document.getElementsByClassName("el-pagination__jump")[0].childNodes;
    jump[0].nodeValue = "给我去第"
    jump[2].nodeValue = "大张"
    let total = document.getElementsByClassName("el-pagination__total")[0].childNodes;
    total[0].nodeValue = "一共就：400"
  }

方案二：

slot.png

• 这个方案就是利用插件提供的slot自定义实现，就不说得太细了。理解几个要点就行。
  看这两行区别
  layout="total, sizes, prev, pager, next, jumper"
layout="slot, prev, pager, next, jumper"
  slot就是你要插入的自定义内容以及排序的位置。

上代码：

组件代码：

<template>
  <div class="block">
    <span class="demonstration">显示总数</span>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="slot, prev, pager, next, jumper"
      :total="400">
      <span>
        <span>我就是总数啊：400</span>
        <el-select v-model="value" size="mini" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </span>
    </el-pagination>
  </div>
</template>

js代码：

{
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        options: [{
          value: 10,
          label: '10棵/亩'
        }, {
          value: 100,
          label: '100棵/亩'
        }],
        value: 10,
        currentPage: 4
      };
    },
  }

其他方案：

一、升级为Element-plus，自带切换方法。
二、用修改原生组件JS的方式，用自定义的内容替换原生内容。本人不建议。