在項目中，有時候我們的項目要根據設計圖來修改我們的表格的頭部，一下就是element提供的兩種修改頭部的方法：

1.  Table-column Attributes  render-header 方法

 

   <el-table-column
      prop="delete"
      label="刪除"
      :render-header="renderHeader"
      width="120"
    >
      <template slot-scope="scope">
        <el-button 
          @click="handleDelete(scope.row)"
        >
          刪除
        </el-button>
      
      </template>
    </el-table-column>

methods:
// 修改表格的頭信息
    renderHeader(h, { column }) {
      // 重新渲染表頭

      if (column.property == 'delete') {
        return h('i', {
          class:
            this.clickDeleteTime == 1
              ? 'el-icon-delete c-red'
              : 'el-icon-delete',
          style: 'font-size:24px',
          on: {//這個是你的點擊方法
            click: () => {
              this.clearAll()
            }
          }
        })
      }
    },

這個是第一種方法：現在你就可以看到你的頭部就是你想要的效果了，不過你會發現的console報了一個警告。

對於我這種對代碼有潔癖的人，很不喜歡這種，開個小玩笑，那就解決掉這個警告不就行了，仔細看了下element文檔，有個新的方法，這就是第二個實現方法。

 2.

Table-column Scoped Slot

 

 

<el-table-column
      prop="delete"
      label="刪除"
      width="120"
    >
      <template
        slot="header"
        slot-scope="{ column, $index }"
      >
        <i
          class="el-icon-delete"
          @click="clearAll"
        >
        </i>
      </template>
      <template slot-scope="scope">
        <el-button
          type=""
          @click="handleDelete(scope.row)"
        >
          刪除
        </el-button>
      </template>
    </el-table-column>

第二種方法完美解決，是不是很簡單，那就開是行動吧！