使用vue3.0+element-ui plus的el-table的表头自定义样式

最近在使用element-ui表格的时候需要进行自定义图标以及带上checkout复选框的操作，重写表格的label就可以实现自定义样式或者是图标等一系列的操作。下面直接上代码

scoped-slot是对表格的label进行重写，使用template的v-solt:header或者#header就可以对表头进行重写，可以随意进行图标样式修改等操作。el-icon是element-ui plus的图标使用方式Filter是引入的图标的名称。

<el-table :data="tableData" style="width: 100%" :height="tableHeight" border>
    <el-table-column prop="date" show-overflow-tooltip scoped-slot>
        <template v-solt:header>
          <el-checkbox v-model="checked" />
          <span class="table-title">姓名
            <el-icon
              :size="16"
              color="rgba(0,0,0,0.45)"
            >
              <Filter />
            </el-icon>
          </span>
        </template>
        <template #default="scope">
          <el-checkbox v-model="scope.row.date" />
        </template>
     </el-table-column>
     <el-table-column prop="date" show-overflow-tooltip scoped-slot>
        <template #header>
          <el-checkbox v-model="checked" />
          <span class="table-title">地址
            <el-icon
              :size="16"
              color="rgba(0,0,0,0.45)"
            >
              <Filter />
            </el-icon>
          </span>
        </template>
        <template #default="scope">
          <el-checkbox v-model="scope.row.date" />
        </template>
     </el-table-column>
     <el-table-column prop="date" show-overflow-tooltip scoped-slot>
        <template #header>
          <el-checkbox v-model="checked" />
          <span class="table-title">日期
            <el-icon
              :size="16"
              color="rgba(0,0,0,0.45)"
            >
              <Filter />
            </el-icon>
          </span>
        </template>
        <template #default="scope">
          <el-checkbox v-model="scope.row.date" />
        </template>
     </el-table-column>
</el-table>
<script>
import { Filter } from '@element-plus/icons'
export default {
  components: {
    Filter,
  },
   data() {
    return {
       tableData: []
    }
   }，
 }