el-table自定义表头 ，表头控制数据的展示与隐藏

<el-table ref="multipleTable" :data="tableDataNo" tooltip-effect="dark"  :class="tableHeaderUpOn == '展开' ? 'hideScrollNode' : ''"  >
          <el-table-column type="selection" width="60" align="center"> </el-table-column>
          <el-table-column :label="未学习">
            <template slot="header" slot-scope="scope">
              <i :class="tableHeaderUpOn == '展开' ? 'el-icon-caret-right' : 'el-icon-caret-bottom' " @click="tableDataNoClick"></i> {
    
    {
    
    '未学习'}}
            </template>
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.ruleName" placement="top">
                <div style="cursor:pointer;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" @click="gotoBasisListAdd(scope.row)">
                  {
    
    {
    
    scope.row.ruleName}}
                </div>
              </el-tooltip>
              <div>
                <el-row>
                  <el-col :span="6" style="padding-right:5px;">
                    <div>职务岗位:{
    
    {
    
    scope.row.jobPosition}}</div>
                  </el-col>
                  <el-col :span="6" style="padding-right:5px;">
                    <div>清单分类:{
    
    {
    
    scope.row.comName}}</div>
                  </el-col>
                </el-row>
              </div>

            </template>
          </el-table-column>
        </el-table>

 tableDataNo: [
        {
    
    
          id: 30,
          ruleName: "sidjfaoiund",
          jobPosition: "dsagddsfgv",
          comName: "dsafsdfds",
          createTime: "sdafds",
          learningState: "sdzfdsf",
         
        },
      ],
      tableHeaderUpOn: "展开",

    tableDataNoClick() {
    
    
      if (this.tableHeaderUpOn == "展开") {
    
    
        this.tableHeaderUpOn = "收起"
      } else {
    
    
        this.tableHeaderUpOn = "展开"
      }
    },

<style>
.hideScrollNode .is-scrolling-none {
    
    
  display: none;
}
</style>