antd-vue pagination分页，文字、图标自定义

一时失言乱红尘 2022-11-05 08:36 224阅读 0赞

## 效果图： ##

![在这里插入图片描述][20210304174722107.png]

## 实现方法： ##

<a-table :columns="columns" :data-source="tableData" rowKey="id" :pagination="paginationProps" bordered>
                    </a-table>

computed: { 
        	// 分页参数
    	    paginationProps () { 
    	      const _this = this
    	      return { 
    	        // showQuickJumper: true, // 是否显示快速跳转
    	        // showSizeChanger: true, // 是否显示修改页面展示条数
    	        current: _this.currentPage, // 当前第几页
    	        pageSize: _this.pageSize, // 每页显示条数
    	        total: _this.total, // 数据总数
    	        showTotal: (total, range) => { 
    	          return ('共' + total + '条')
    	        },
    	        itemRender: (current, type, originalElement) => { 
    	          if (type === 'prev') { 
    	            return <a class="ant-pagination-item-link prev-btn"><i aria-label="图标: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i> </a>
    	          } else if (type === 'next') { 
    	            return <a class="ant-pagination-item-link next-btn"> <i aria-label="图标: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a>
    	          }
    	          return originalElement
    	        },
    	        onChange (page, pageSize) {  // 切换页码
    	          _this.currentPage = page
    	          // _this.getList()
    	        },
    	        onShowSizeChange (current, size) {  // 切换每页显示条数
    	          _this.pageSize = size
    	          // _this.getList()
    	        }
    	      }
    	    }
    	}

[20210304174722107.png]: /images/20221023/68ffc8799988434ab0369aaf967bb837.png