效果展示图
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的方式，用自定义的内容替换原生内容。本人不建议。
