element-ui动态的多级表头，怎么实现表头筛选

Question

用element做了一个多级表头的表格如图：我想实现当用户选择上面的选择时间进度下拉框时候，如半年就只出现半年的数据，其他隐藏，不是多级表头的我写了一个过滤器，过滤column里的数据，但是现在column就有好几个，有没有什么办法

---

代码结构：

<div class="table-tree">

  <tree-grid
    :columns="columns"
    :yearlyPlan="yearlyPlan"
    :halfYearPlan="halfYearPlan"
    :quarter="quarter"
    :monthlyPlan="monthlyPlan"
    :weeklyPlan="weeklyPlan"
    :dailyPlan="dailyPlan"
    :tree-structure="true"
    :data-source="dataSource">
  </tree-grid>
</div>

---

 import TreeGrid from '../../common/treenTable/materialPlanTree.vue'
//表头的数据
//      计划
      columns: [
      //表头的数据 有text，dataIndex
        {
          text: '序号',
          dataIndex:'codingSite'
        },
      ],
//      年
      yearlyPlan:[],
//      半年
      halfYearPlan:[],
//      季
      quarter:[],
//      月
      monthlyPlan :[],
//      周
      weeklyPlan  :[],
//      日
      dailyPlan  :[]

---

//渲染表头
   <el-table-column label="当年">
        <el-table-column v-for="(column ,index) in yearlyPlan" :key="column.text" :label="column.text" :prop="column.dataIndex">
          <template scope="scope">
            {{scope.row[column.dataIndex]}}
          </template>
        </el-table-column>
      </el-table-column>
      </el-table-column>
      <el-table-column label="半年">
        <el-table-column v-for="(column ,index) in halfYearPlan" :key="column.text" :label="column.text" :prop="column.dataIndex">
          <template scope="scope">
            {{scope.row[column.dataIndex]}}
          </template>
        </el-table-column>
      </el-table-column>