Element UI分页组件prev-text和mext-text属性无效？

标签：for   com   http   you   block   class   splay   es2017   一起   

　　前情提要 /(ㄒ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 UI分页组件prev-text和mext-text属性无效？

标签：for   com   http   you   block   class   splay   es2017   一起   

原文地址：http://www.cnblogs.com/zheng577564429/p/7793325.html