1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Ant Design of Vue —— Table表格组件 —— 设置动态表头(固定下的动态)

Ant Design of Vue —— Table表格组件 —— 设置动态表头(固定下的动态)

时间:2019-07-30 02:35:50

相关推荐

Ant Design of Vue —— Table表格组件 —— 设置动态表头(固定下的动态)

需求:表格的表头,需要动态改变

效果图

实现步骤:

一、表头数据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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。