本文次要介绍应用vue jsx二次封装用到的知识点，具体的性能能够浏览源码 vue-jsx-table

背景

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

继承element-table的属性和事件

<el-table          ref="table"          {...{            props: this.$attrs,            on: this.$listeners,          }}> </el-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,      })    );  },};

所以申明一个插槽的时候咱们就能够这样应用：

   <el-table-column      scopedSlots={{            default: ({ row, $index }) => {              return (                <table-slot                  row={row}                  column={column}                  $index={$index}                  parent={that}                ></table-slot>              );            },          }}        ></el-table-column>

实现.sync 修饰符

vue jsx中并没有.sync修饰符，所以须要这样实现：
实现 :current-page.sync="currentPage1"

           <el-pagination              {...{                on: {                  "update:currentPage": (val) => (that.page.currentPage = val),                },              }}            ></el-pagination>