记录 ant design vue 的tabs组件用render函数渲染的坑

前言

用render函数渲染 ant design vue 的tabs组件

组件版本

ant-design-vue:"1.7.8"

vue: "^2.6.12",

问题

render(h) {
    const tabs = [1,2,3].map((g,index) => {
      return h(
        'a-tab-pane',
        {
          props:{
            key: 'a'+index,
            tab: 'aa'+ index,
            // forceRender: true
          },
        },
        index
      );
    });
    return h(
      'a-tabs',
      {
        props:{
          type:'card',
          tabBarGutter:8,
          defaultActiveKey: 'a0',
        },
        // scopedSlots:{
        //   'default':  tabs
        // },
      },
      tabs
    )
  }

默认效果:

点击tabbar:

解决：

key传参不是放入props中，需要提出来

render(h) {
    const tabs = [1,2,3].map((g,index) => {
      return h(
        'a-tab-pane',
        {
          props:{
            // key: 'a'+index,
            tab: 'aa'+ index,
            // forceRender: true
          },
          key: 'a'+index,
        },
        index
      );
    });
    return h(
      'a-tabs',
      {
        props:{
          type:'card',
          tabBarGutter:8,
          defaultActiveKey: 'a0',
        },
        // scopedSlots:{
        //   'default':  tabs
        // },
      },
      tabs
    )
  }

效果:

此时发现， activeKey 或者用 v-model ,render函数中写 v-model需要注意

activeKey = 'a0';
……

render(h) {
    const tabs = [1,2,3].map((g,index) => {
      return h(
        'a-tab-pane',
        {
          props:{
            // key: 'a'+index,
            tab: 'aa'+ index,
            forceRender: true
          },
          key: 'a'+index,
        },
        index
      );
    });
    return h(
      'a-tabs',
      {
        props:{
          type:'card',
          tabBarGutter:8,
          value:this.activeKey, // v-model实现,其实就是一个语法糖
          // activeKey: this.activeKey,

        },
        on: {
          input(event) {
            this.activeKey = event;
          },
          // change(key) { //或者
          //   this.activeKey = key;
          // }
        },
      },
      tabs
    )
  }