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() {},
        },
        "詳情"
      ),
    ]);