vue3 render函数

vue3.x中的渲染函数

https://v3.cn.vuejs.org/guide/migration/render-function-api.html#_2-x-%E8%AF%AD%E6%B3%95-4

使用div,img,p等html标签

样式写在style标签里面，其他的属性都单独写在外面

render: (row:any) => {
        return h("div", [
          h('p', {
              style: {
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis'
              },
              title: row.storeName
            },
            row.storeName
          ),
        ])
      }

 

render: (row: any) => {
        return h("div", [
          h('img', {
              style: {
                width: '35px',
                height: '35px',
                borderRadius: '50%',
              },
              src: row.avatarUrl || '../../assets/images/avatar.png'
            },
          ),
        ])
      },

　　

使用第三方组件

使用Element-Plus的按钮组件，需要使用一个导入的 resolveComponent

  import { resolveComponent } from "vue";
  const elBbtn = resolveComponent("el-button");

  render: (row: any) => {
    return h("div", [
      h(
        elBbtn,
        {
          type: "text",
          size: "small",
          onClick() {},
        },
        "详情"
      ),
    ]);