封装Element ui table组件及vue render函数的自定义指令怎么用

哟哟切克闹，废话不多说，干货上一波。 封装Element ui Table组件并且涉及Vue 函数式组件及render函数中如何使用并且自定义指令如何在该函数中添加

<script>
    // 函数式组件
    const renderComponent = {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
          listeners: ctx.listeners,
        };
        if (ctx.props.column) params.column = ctx.props.column;
        return ctx.props.render(h, params);
      },
    };
    
    export default {
        methods: {
            // 点击事件
            onAction(){}
        },
        components: {
            renderComponent
        }
    }
</script>

<template>
    <el-table
    ref="eleTable"
    border
    :height="height || '100%'"
    style="width: 100%"
    :data="list"
    :class="'ele-table-container'"
    :row-class-name="tableRowClassName"
    v-loading="loading"
  >
    <el-table-column type="index" width="50" align="center" label="序号">
    </el-table-column>
    <el-table-column
      v-for="(item, inx) in tableHeaderItems"
      :key="inx"
      :prop="item.prop"
      :align="item.align || 'center'"
      :label="item.label"
      :fixed="item.fixed || false"
      :sortable="item.sortable || false"
      :width="item.width || 'auto'"
    >
      <template slot-scope="scope">
        <template v-if="item.render">
          <renderComponent
            :row="scope.row"
            :index="inx"
            :column="scope.column"
            :render="item.render"
            :editKey="editKey"
            :editValue="editValue"
            @click="onAction($event, scope.row)"
          />
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>


// tableHeaderItems 数据
const tableHeaderItems = [
    {
        label: '细',
        prop: 'clock',
        render: (h, { row, listeners }) => {
          return h('span', {
            class: 'table-cell-link table-cell-blur-link',
            on: {
              click: () => {
                listeners.click()
              }
            },
            directives: [{ // 自定义指令（在main.js里面已经定义为全局指令，所以这里直接引入对应的名称就行
              name: 'permission', // 名称
              value: '/detail/clockList' // value值，如果有需要
            }]
          }, "点击)
    },
    {
        label: '喜喜',
        prop: 'lok',
        render: (h, { row }) => {
            return h('ul', {
                    style: {
                        backgroundColor: 'red'
                    }
                }, [
                h('li', {
                    attr: {}
                }, '第一'),
                h('li', {
                   attr: {}
                }, '第二')
            ]
        }
    }
]