el-table 表头筛选功能

<template>
  <div class="test-container">
    <el-table>
      <template v-for="(headerItem, headerIndex) in headerData">
        // 多选框选择器
        <el-table-column
          v-if="headerItem.select"
          :label="headerItem.label"
          :prop="headerItem.prop"
          :key="headerIndex"
        >
          // 表头的 slot
          <template #header>
            <el-popover placement="bottom" title="" width="200" trigger="click">
              <div slot="reference" class="search-header">
                <span class="search-title">{{ headerItem.label }}</span>
                <span class="iconCss">
                  <img style="height:16px;width:16px;" src="../../assets/bg-screen.png" alt="" />
                </span>
              </div>
              <el-checkbox-group v-model="headerItem.selectValue">
                <el-checkbox
                  v-for="item in headerItem.selectOptions"
                  :value="item.value"
                  :label="item.label"
                  :key="item.value"
                >
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
              <el-button size="mini">筛选</el-button>
              <el-button size="mini" @click="reset(headerIndex)">
                重置
              </el-button>
            </el-popover>
          </template>
          // 表格的 内容 slot
          <template slot-scope="scope">
            <div class="aaa">{{ scope.row[headerItem.prop] }}</div>
            <span v-if="scope.row[headerItem.prop] == '1'" class="color1">
              <i class="circle1"></i>
              未开始
            </span>

            <span v-if="scope.row[headerItem.prop] == '2'" class="color2">
              <i class="circle2"></i>
              活动中
            </span>
            <span v-if="scope.row[headerItem.prop] == '3'" class="color3">
              <i class="circle3"></i>
              维护中
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        headerData: [
          {
            label: '项目类型',
            prop: 'projectType',
            select: true,
            selectValue: [],
            selectOptions: [
              {
                value: 'Vue',
                label: 'Vue',
              },
              {
                value: 'React',
                label: 'React',
              },
              {
                value: 'Angular',
                label: 'Angular',
              },
            ],
          },
          {
            label: '需求部门',
            prop: 'demand',
            select: true,
            selectValue: [],
            selectOptions: [
              {
                value: '客户经营部',
                label: '客户经营部',
              },
              {
                value: '零售金融部',
                label: '零售金融部',
              },
            ],
          },
          {
            label: '所属团队',
            prop: 'demand',
            select: true,
            selectValue: [],
            selectOptions: [
              {
                value: 'Vue',
                label: 'Vue',
              },
              {
                value: 'React',
                label: 'React',
              },
              {
                value: 'Angular',
                label: 'Angular',
              },
            ],
          },
          {
            label: '状态',
            prop: 'status',
            select: true,
            selectValue: [],
            selectOptions: [
              {
                value: 'Vue',
                label: 'Vue',
              },
              {
                value: 'React',
                label: 'React',
              },
              {
                value: 'Angular',
                label: 'Angular',
              },
            ],
          },
        ],
      }
    },
    methods: {},
  }
</script>