前情提要 /(ㄒoㄒ)/~~

  作为刚刚接触 Element 组件的人来说,看文档是第一步,但是当我想要修改分页组件里面的按钮时却遇到了问题。

  

  文档中写到是需要给 prev-text 和 next-text 属性就可以将下图中划红线的小箭头修改成想要的文字,比如“上一页”和“下一页”。

  于是我试了两种方式去使用这两个属性,都没有成功,分页组件“一动不动”,简直就是黑人问号脸!

//第一种方法无效
<div class="block">
<el-pagination
layout="prev, pager, next"
:total="200"
prev-text="上一页"
prev-text="下一页">
</el-pagination>
</div> //第二种方法也无效
<div class="block">
<el-pagination
layout="prev, pager, next"
:total="200"
:prev-text="changePage.pre"
:prev-text="changePage.nex">
</el-pagination>
</div>
:
<script>
export default {
data() {
return {
changePage:{
pre:"上一页",
nex:"下一页"
}
}
}
}
</script>

  怎么解决!?在网上搜了很久,但大家的问题都是如何修改组件中文字的颜色或字号,几乎没有使用 prev-text 和 next-text 属性的,难道……大家都没有这个需求吗!?好可怕,那就只能自己研究了,期间还异想天开的去搜索CSS可不可以改变文字内容?

  从另一个角度来看,答案当然是可以的!就是从伪类的角度入手,也就是我要说的解决方法。

  我们都知道CSS中的伪类是有 content 的,content中的内容就是伪类要显示的文字或字符串内容,如果用不到我们可以设置为空字符串,那么上面的问题就只需要将“上一页”写在其组件中类名为“btn-pre”的 before 伪类中,那么问题就可以解决了,至于小箭头怎么办? display:none掉就好了。

.btn-prev:before{
content: "上一页";
}
.btn-next:before{
content: "下一页";
}

  以上方法是我目前想到的解决办法,如果还有其他更好的方法,或者文中我有哪些不对和还有待改善的地方希望朋友们指正,我们一起学习进步~~!

  希望对大家有所帮助!

Element分页组件prev-text和next-text属性无效?的更多相关文章

  1. vue-cli3 element 分页组件el-pagination的基本使用

    <!--分页组件--> <el-pagination :total="total" :current-page="currentPage" : ...

  2. 解决element 分页组件,搜索过后current-page 绑定的数据变了,但是页面当前页码并没有变的问题

    前言上一篇写前台解决分页问题的时候没有这个问题,但是在实际项目后台中有遇到过,所以在这里专门说一下,如果参考前台分页出现这种问题了,也可以使用这种方法!bug:vue和element实现的后台分页,当 ...

  3. Flutter常用组件(Widget)解析-Text

    单一格式的文本. 文本组件是以字符串形式显示的单一格式,这个文本字符串可以是多行显示也可以是单独一行显示,主要取决于你的布局限制. 这样式内容是可选择的,如果你省略了,则会使用文本的默认样式来显示.如 ...

  4. Vue+element UI实现分页组件

    介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...

  5. FreeMarker分页组件监听器

    分页组件监听器 /*  * project名:    * 包     名: com.companyName.dhm.iepgm.common.taglib  * 文 件名: PaginatedList ...

  6. 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

  7. vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)

    文章目录 1.看实现的效果 2.前端vue页面核心代码 2.1. 表格代码(表格样式可以去elementui组件库直接调用相应的) 2.2.分页组件代码 2.3 .script中的代码 3.后端核心代 ...

  8. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

  9. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

随机推荐

  1. ansible常用命令大全

    ansible 默认提供了很多模块来供我们使用.在 Linux 中,我们可以通过 ansible-doc -l 命令查看到当前 ansible 都支持哪些模块,通过 ansible-doc  -s   ...

  2. LR访问Https接口

    实操篇 第一步:需要跟开发或者运维要到要访问的https接口的证书(有关证书的问题我们在原理中有解释). 第二步:确定要来的证书的格式是否为pem格式的.首先,LR只能够识别pem格式的证书而且是DE ...

  3. 生成id

    package com.develop.web.util; import java.security.MessageDigest; import java.text.SimpleDateFormat; ...

  4. Not supported for DML operations

    问题原因 缺失@Modifying注解 问题解决 在自定义的修改方法(delete.update)上面除了@Transactional注解和@Query还需要@Modifying注解 Bug重现 or ...

  5. 【团队】EasyKing的实现_2

    下载开发版 完成情况 完成了碰撞箱的制作 TODO 子弹攻击范围 音效 英雄技能 建筑 双人联机 物品 小兵 地图移动

  6. Learning-Python【6】:Python数据类型(2)—— 列表、元组

    一.列表类型 1.用途:记录多值,比如人的多个爱好 2.定义方式:在[ ]内用逗号分隔开多个任意类型的值 li = [1, 2, 3] 3.常用操作+内置方法 优先掌握的操作: 1)按索引存取值:可以 ...

  7. 【BZOJ】 4810: [Ynoi2017]由乃的玉米田

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4810 思路还是比较显然,第一反应应该就是莫队. 考虑怎么维护三个询问,想到了要维护每一个数 ...

  8. python requests 上传文件

    token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjoiZWM2ZWFjZjFjM2UzYzEyOWU3ODA4YjgwNzkxNGI ...

  9. MySQL中case then用法

    1.查询图书价格,若价格为null,则显示unknown,若价格为10到20, 则显示10 to 20 SELECT price, CASE WHEN price='null' THEN 'UnKno ...

  10. 环境准备—之—linux下安装jdk

    本文大部分转自  https://www.cnblogs.com/Dylansuns/p/6974272.html openjdk与jdk的区别 ----反正不一样,要不名字也不会不相同了 https ...