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标签里面，其他的属性都单独写在外面

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

import { resolveComponent } from "vue"; const elBbtn = resolveComponent("el-button");   render: (row: any) => {   return h("div", [     h(       elBbtn,       {         type: "text",         size: "small",         onClick() {},       },       "详情"     ),   ]);