自定义表格的表头

有时候有些表格需要显示很多的内容，那么表格就会变得很宽，如果想要看某一列，就需要拖动表格滑动才能找的到，不太方便；

自定义表头就可以自己操作，筛选出需要显示的表头，然后让表格显示相对应的内容，便于比较和查询

首先，先写一个基础的表格 

<template>
  <div class="task-view-content">
    <div class="operation-container">
      <div class="operation-left">
        <span>操作栏</span>
      </div>
      <div class="operation-right">
        <el-button @click="createMessage" class="mr5" type="primary" v-auto-blur>
            创建
        </el-button>
      </div>
    </div>
    <div class="content">
      <div v-if="showList" style="height: 100%">
        <div
          v-if="showCondition"
          style="width: 100%; overflow: auto; margin-bottom: 10px"
          class="condition"
        >
          <template
            v-for="(condition, name) in searchParam"
            :key="condition.nameCn"
          >
            <el-tag
              v-if="condition.isActive"
              closable
              type="info"
              @close="fliterClear(name)"
            >
              {
  { condition.nameCn }}：{
  { condition.label }}
            </el-tag>
          </template>
          <el-button text @click="clearAll">清除</el-button>
        </div>
        <el-table
          :data="tableData"
          @row-click="rowClick"
          :style="{
            width: '100%',
            height: showCondition ? 'calc(100% - 43px)' : '100%',
          }"
          size="default"
          height="100%"
          class="content-table"
        >
          <el-table-column
            v-if="checkedColumns.includes('id')"
            :prop="tableHeader[0].prop"
            :label="tableHeader[0].label"
            show-overflow-tooltip
            min-width="100"
          >
            <template #header>
              <div
                :field="'id'"
                :isActive="searchParam.id.isActive"
                class="flex-item-center"
                style="justify-content: space-between; height: 23px"
              >
                <span>{
  { tableHeader[0].label }}</span>
                <filter-strin