element label添加表头下拉菜单，并解决表头数据不刷新

<el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      align='center'
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="礼品名称" width="130px">
        <template slot="header">
        <el-dropdown trigger="click" @command="handleCommand" size="mini">
          <span>
            {{presentName}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in present"
              :key="item.id" :command="item.label">
              {{item.label}}
            </el-dropdown-item>
            <el-dropdown-item command="全部礼品" >全部礼品</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      </el-table-column>
 </el-table>



present:[{
        id:1,
        label:'人'
      },
      {
        id:2,
        label:'大'
      },
      {
        id:3,
        label:'的撒'
      },
      {
        id:4,
        label:'大大'
      }],
presentName:'全部礼品'，


// 点击表格头部下拉菜单
    handleCommand(val){
        this.presentName=val
//深拷贝数据，数据不变 但可以刷新表头数据
        let src=JSON.parse(JSON.stringify(this.tableData)) 
        this.tableData=src
    },