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-table
        ref="table"
        size="middle"
        bordered
        rowKey="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'] = val
            this.year = this.yearList  //动态传入时
            //this.loadData(1);
          }
        }
      },
    },

解释：yearList 是父组件传入的数据，year在data中定义的

有用的话 留个关注可好

有问题或不对的地方请留言，看到会尽快回复的

动态生成表头连接

https://blog.csdn.net/weixin_46328144/article/details/115239243