Antdesignvuetablea-table二次封装,槽位渲染问题
目的是重新封装a-table,但是遇到了a-table的slot如何显示的问题,本来的想法是在a-table渲染两个$slots,但是期望在使用该组件时正确渲染。..将无法正确呈现{{this.$slots[slot]}}后来发现a-table在某一种写法中有参数scopedSlots,但是不能直接赋值在模板,如下可行方法组件不使用template来写,使用render()变成:render(){conston={...this.$listeners}constprops={...this.$attrs,...this.$props,...{数据源:this.body,列:this.header}}consttable=()返回({table}
)},methods:(){}重点是scopedSlots={this.$scopedSlots},这样直接写就可以正常渲染了组件调用方法
//这里是header的渲染,下面会讲{{getHeaderTarget(title).remark}}{{getHeaderTarget(title).title}}//在这里渲染列数据{{文本|号码固定|否umberFormat}}下表数据为原始数据,渲染为三断一断,保留2位小数。this.$scopedSlots数据格式:header中是scopedSlots:{customRender:'consumption'}Format如何渲染headerslot还是同表格,要求header有提示信息,所以我也在header中做了slots和rendereda-tooltip显示提示信息此时header格式为[{scopedSlots:{customRender:'consumption',title:'$consumption'}}]在scopedSlots中设置title字段进行header渲染,自定义header此时的名字。this.$scopedSlots还有一个$consumptionheaderslot字段,但是不正常渲染出来却发现this.$slots里面只有slot而且只有tableheader。这个时候我觉得应该把$slots的内容渲染到a-table里,然后render(){conston={...this.$listeners}constprops={...this.$attrs,...this.$props,...{dataSource:this.body,columns:this.header}}//槽循环constslots=Object.keys(this.$slots).map(slot=>{return({this.$slots[slot]})})consttable=({slots}//放在这里{table}