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

加蓓努力我先飞

已于 2023-03-20 11:53:58 修改

阅读量1.3k

点赞数

分类专栏：前端开发 elementui 文章标签： vue.js css3 前端

于 2022-11-30 15:17:31 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/128115723

版权

前端开发同时被 2 个专栏收录

92 篇文章 4 订阅

订阅专栏

elementui

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<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>

完结

补充：

  <el-table-column
            label="全选"
            :render-header="(h, obj) => renderHeader(h, obj, '确定')"
            style="display: inline"
          > </el-table-column>

    // 自定义列名
    renderHeader(h, { column, $index }, type) {
      let that = this;
      return h("div", [
        // 列名称
        h("span", column.label),
        // 按钮
        h(
          "el-button",
          {
            props: {
              type: "primary",
              // size: 'small',
            },
            class: "el-icon-download",
            style: "margin-left: 15px;background:#169BD5;width:136px;",
            on: {
              click: function () {
                // that.clickButton(type);
              },
            },
          },
          "批量下载"
        ),
      ]);
    },
    clickButton(){
    },