el-table表头增加点击事件实现复制功能

需求描述：点击表头上的图标，将第一行的数据复制到其他行

给el-table-column增加方法 <el-table-column :render-header="(h, obj) => renderHeader(h, obj, 'returnDate')">

直接附代码


<el-table ref="wkTable" :row-height="40" :data="tableData" :height="400" use-virtual style="width: 100%;">
  <el-table-column prop="returnDate" align="center" label="计划回款日期" :render-header="(h, obj) => renderHeader(h, obj, 'returnDate')" width="160">
    <template slot-scope="{row}">
      <el-date-picker v-model="row.returnDate" :clearable="false" style="width: 100%;" type="date"
        value-format="yyyy-MM-dd" />
    </template>
  </el-table-column>
</el-table>

 methods: {
    //自定义表头
    renderHeader(h, { column, $index }, type) {
      let that = this;
      return h(
        'div', [
        // 列名称
        h('span', column.label),
        // 按钮
        h('el-button', {
          props: {
            type: 'text',
            size: 'small',
            icon: 'el-icon-caret-bottom'
          },
          style: 'margin-left: 5px;color:#999999',
          on: {
            click: function () {
              that.clickButton(type);
            }
          }
        }, '')
      ],
      )
    },
    // 按钮点击事件
    clickButton(type) {
      if(this.tableData.length == 0 || !this.tableData[0][type]){
        return
      }
      console.log('我点击了' + type + '的列');
      if(this.tableData.length>0){
        this.tableData.map(item=>{
          this.$set(item,type,this.tableData[0][type])
        })
      }
    },
 }