element-ui自定义表格头部的两种方法

 

在项目中，有时候我们的项目要根据设计图来修改我们的表格的头部，一下就是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>

第二种方法完美解决，是不是很简单，那就开是行动吧！