需求:表格的表头,需要动态改变
效果图
实现步骤:
一、表头数据columns
columns: [{// title:'y1',scopedSlots:{title:'y1'},align:"center",dataIndex: 'y1'},{// title:'y2',scopedSlots:{title:'y2'},align:"center",dataIndex: 'y2'},]
解释:通过scopedSlots添加插槽,里面设置属性
scopedSlots:{title:'y2'},
二、HTML代码
<a-tableref="table"size="middle"borderedrowKey="id":scroll="{x:true}":columns="columns":dataSource="dataSource":pagination="ipagination":loading="loading":rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"@change="handleTableChange"><template slot="y1">{{year[0]}}</template><template slot="y2">{{year[1]}}</template><template slot="y3">{{year[2]}}</template><template slot="y4">{{year[3]}}</template><template slot="y5">{{year[4]}}</template></a-table>
解释:template添加插槽代码,slot=“y1”对应表头数据中title,{{year[0]}}对应的值
三、在你的方法中为动态为year赋值,year是自己定义的名字,用来存储动态改变的数据,
watch:{mainId:{immediate: true,handler(val) {if(!this.mainId){//this.clearList()this.year = ['y1','y2','y3','y4','y5']//传入数据时}else{//this.queryParam['parentId'] = valthis.year = this.yearList //动态传入时//this.loadData(1);}}},},
解释:yearList 是父组件传入的数据,year在data中定义的
有用的话 留个关注可好
有问题或不对的地方请留言,看到会尽快回复的
动态生成表头连接
/weixin_46328144/article/details/115239243