vue3使用render對element-plus的table組件封裝

需求：

自定義el-table的某些列

涉及知識點：

1.父組件傳遞給子組件render函數，自組件如何渲染出來

2.vue3中render函數使用第三方UI組件、傳遞屬性、綁定事件

關於render函數的變更文檔：

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

實現：

父組件：

{
    title: '操作',
    key: 'operation',
    render: (row:Object) => {
        return h('div', {}, [
            h(btn, {
              type: 'text',
              size: 'small',
              onClick(){
                getDetail(row)
              }
            }, '查看'),
            h(btn, {
              type: 'text',
              size: 'small',
              onClick(){
                getDetail(row)
              }
            }, '編輯')
        ]);
    } 
  }

 子組件（table組件）

<Expand :column="item" :row="scope.row" :render="item.render" :index="index" />

 

 expand.ts

import { h } from 'vue';
export default {
    props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
            type: Object,
            default: null
        }
    },
    render: function () {
        return this.render(this.row)
    }
}