Element-ui分頁組件定製文本內容

效果展示圖

怎麼解決element-ui的定製問題

• 第一步：先看插件本身能不能實現。
• 第二步：不能實現看這個問題如何轉述爲程序語言。
• 第三步：解決這個問題。

實戰來做：

• 插件沒有提供修改文本的方式
• 這個問題轉述程序語言就是：如何修改元素中的文本內容。
• 很明顯，通過js就能找到這個元素，並修改元素內容。

具體步驟：

第一步：確定元素，看其唯一類名或者ID，總之看dom結構找到用js找到元素的方法。

找到了元素就簡單了，在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自定義實現，就不說得太細了。理解幾個要點就行。
  看這兩行區別
  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的方式，用自定義的內容替換原生內容。本人不建議。