使用vue|使用vue jsx封装element-table 使用vuejsx封装element-table

本文主要介绍使用vue jsx二次封装用到的知识点，具体的功能可以浏览源码 vue-jsx-table
背景 element-table提供了大量的功能，在平时业务中最常见的就是渲染列、自定义列这、分页控件展示等。由于element-table使用了模版语法来控制显示等列等，这样造成了一些业务开发工作中的重复劳动，以及很难复用，只能通过copy的形式。如果开发人员经常使用Ant Design的可能没这些问题，下文将介绍使用vue jsx二次封装用到的知识点。

文章图片

继承element-table的属性和事件

定义插槽 【使用vue|使用vue jsx封装element-table】使用jsx时，我们要声明时函数式的 functional: true，这样可以解决我们嵌套定义插槽时无法在父组件拿到的问题。

injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property
scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。

export default { name: "TableSlot", functional: true, inject: ["tableRoot"], props: { row: Object, index: Number, column: { type: Object, default: null, }, }, render: (h, ctx) => { return h( "div", {}, ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot]({ row: ctx.props.row, column: ctx.props.column, index: ctx.props.index, }) ); }, };

所以声明一个插槽的时候我们就可以这样使用：