Ant Design of Vue 的 Pagination 如何在itemRender中指定a标签的href值？

Question

官方文档Pagination分页 - Ant Design of Vue

它的itemRender回调可用于自定义页码按钮的结构，用于SEO。
现在我想对a标签增加href值(默认情况是没有href值的)，请问如何实现呢？

下方的代码会对a标签外层的li标签增加href，怎么在a标签上增加href属性呢？

相关代码

      <a-pagination
        hideOnSinglePage
        v-model="currentPage"
        :total="total"
        :itemRender="itemRender"
        @change="pageChange"/>

      itemRender(page, type, ele) {
        let path = page > 1 ? `${this.baseUrl}/${page}` : this.baseUrl;
        ele.context.$attrs.href = path;
        return ele;
      }

现在的html

<li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2 ant-pagination-item-active" href="/galleries/2">
    <a>2</a>
</li>

期待的html

<li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2 ant-pagination-item-active">
    <a href="/galleries/2">2</a>
</li>

关键词

修改VNode属性，VNode绑定事件

Answer 1

细节问题相信你应该可以自己处理

itemRender(page, type, originalElement) {
  if (type === "page") {
    return <a href={`/galleries/${page}`}>{page}</a>;
  } else if (type === "prev") {
    return <a href={`/galleries/${this.currentPage - 1}`}>上一页</a>;
  } else if (type === "next") {
    return <a href={`/galleries/${this.currentPage + 1}`}>下一页</a>;
  }
}

Answer 2

通过这种方式也可以达到目的

      itemRender(page, type, vNode) {
        let path = page > 1 ? `${this.baseUrl}/${page}` : this.baseUrl;
        if (vNode.data) {
          Object.assign(vNode.data, {
            attrs: {
              href: path
            }
          });
        } else {
          vNode.data = {
            attrs: {
              href: path
            }
          }
        }
        let callback = function (e) {
          e.preventDefault();
        };
        if (vNode.data.on) {
          Object.assign(vNode.data.on, {click: callback});
        } else {
          vNode.data.on = {click: callback};
        }

        return vNode;
      }