使用vuejsx封装element-table

本文主要介绍vuejsx二次封装使用的知识点。具体功能可以浏览源码。vue-jsx-table后台element-table提供了大量的功能。最常见的有渲染栏目、自定义栏目、分页控制显示等。由于element-table使用模板语法来控制显示等栏目，在一些业务开发工作中造成重复工作，难以复用，所以只能是copy的形式。如果开发者经常使用AntDesign，可能不会出现这些问题。下面就介绍下vuejsx二次封装所用到的知识点。继承element-table的属性和事件使用jsx定义slot，我们需要声明functional:true，可以解决嵌套定义slots时在父组件中获取不到的问题。injections：（2.3.0+）如果使用了inject选项，则此对象包含propertyscopedSlots：（2.6.0+）一个公开传入的作用域插槽的对象。还将普通插槽公开为函数。exportdefault{name:"TableSlot",functional:true,inject:["tableRoot"],props:{row:Object,index:Number,column:{type:Object,default:null,},},渲染:(h,ctx)=>{returnh("div",{},ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot]({行：ctx.props.row，列：ctx.props。列，索引：ctx.props.index,}));},};所以在声明一个槽的时候，我们可以这样使用：{return(column}$index={$index}parent={that}>);},}}>实现了.sync修饰符vuejsx中没有.sync修饰符，所以需要这样实现：implement:current-page.sync="currentPage1"(that.page.currentPage=val),},}}>