关于前端:使用vue-jsx封装elementtable

本文次要介绍应用 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>