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

ゝ一纸荒年。 2022-10-26 03:49 10阅读 0赞

# 需求：表格的表头，需要动态改变 #

## 效果图 ##

![在这里插入图片描述][20210201172725958.gif_pic_center]

## 实现步骤： ##

一、表头数据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][https_blog.csdn.net_weixin_46328144_article_details_115239243]

[20210201172725958.gif_pic_center]: /images/20221024/d4149a612974473ea8917e57d35a601d.png
[https_blog.csdn.net_weixin_46328144_article_details_115239243]: https://blog.csdn.net/weixin_46328144/article/details/115239243