在这里插入图片描述
在这里插入图片描述

<el-table ref="multipleTable" :data="tableDataNo" tooltip-effect="dark"  :class="tableHeaderUpOn == '展开' ? 'hideScrollNode' : ''"  >
          &lt;el-table-column type="selection" width="60" align="center"&gt; </el-table-column&gt;
          <el-table-column :label="未学习"&gt;
            <template slot="header" slot-scope="scope"&gt;
              <i :class="tableHeaderUpOn == '展开' ? 'el-icon-caret-right' : 'el-icon-caret-bottom' " @click="tableDataNoClick"&gt;</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(){
    },

原文地址:https://blog.csdn.net/ingenuou_/article/details/128115723

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_24316.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注