ant design vue Pagination itemRender 自定义上一页下一页和页码文字

ant design vue Pagination 自定义页码文字，比如上一页下一页默认是箭头符号我们也可以把它自定义成与自己系统匹配的文字。

node.js webpack方式

itemRender方法来自定义页码文字

<template>
    <a-pagination :total="300" :itemRender="itemRender" />
</template>
<style scoped>
  .itxst{
    padding-left: 6px;
    padding-right: 6px;
  }
</style>
<script>
  export default {
    methods: {
      itemRender(current, type, originalElement) {
        if (type === 'prev') {
          return <a class="ant-pagination-item itxst">上一页</a>;
        } else if (type === 'next') {
          return <a class="ant-pagination-item itxst">下一页</a>;
        }
        return originalElement;
      },
    },
  };
</script>

浏览器方式

利用itemRender方法，修改渲染的VNode(vue的性能dom)

<div id="app">
<a-pagination v-model="current" :item-render="itemRender" :total="50" />
</div>
<script>
var app = new Vue({
    el: '#app',
    data() {
        return {
            current: 2,
        };
    },
    methods: {
        itemRender(current, type, originalElement) {
            if (type === 'prev') {
                originalElement.children = undefined;
                originalElement.text = "上一页";
                originalElement.data.class = originalElement.data.class + " red"
                return originalElement;
            } else if (type === 'next') {
                originalElement.children = undefined;
                originalElement.text = "下一页";
                originalElement.data.class = originalElement.data.class + " red"
                return originalElement;
            }
            return originalElement;
        },
    },
});
 </script>

例子