Use vue jsx to encapsulate element-table

This article mainly introduces the knowledge points used in the secondary packaging of . For specific functions, you can browse the source code 1612a092fc50a6 vue-

background

element-table provides a large number of functions. The most common ones in normal business are rendering columns, custom columns, and paging control display. Because element-table uses template grammar to control the display and other columns, it causes duplication of work in some business development work, and it is difficult to reuse, and it can only be done in the form of copy. If developers often use Ant Design, they may not have these problems. The following will introduce the knowledge points used in the secondary packaging of vue jsx.

Inherit the attributes and events of element-table

<el-table
          ref="table"
          {...{
            props: this.$attrs,
            on: this.$listeners,
          }}
>

 </el-table>

Define slot

When using jsx, we need to declare functional: true, so that we can solve the problem that we can't get it in the parent component when we nest the slot definition.

• injections: (2.3.0+) If the inject option is used, the object contains the properties that should be injected
• scopedSlots: (2.6.0+) An object that exposes the scoped slots passed in. Common slots are also exposed in the form of functions.

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,
      })
    );
  },
};

So when declaring a slot, we can use it like this:

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

Implement the .sync modifier

There is no .sync modifier in vue jsx, so it needs to be implemented like this:
Implementation: current-page.sync="currentPage1"

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