共计 1151 个字符,预计需要花费 3 分钟才能阅读完成。
本文次要介绍应用 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>
正文完