使用vue jsx封装element-table

本文主要介绍使用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>