element-ui自定义表头；el-table自定义表头；render-header自定义表头

本文介绍: element–ui 自定义表头；el–table 自定义表头；render–header 自定义表头

自定义 表头有两种方式：一种是使用 render–head e r 一种是通过 设置 Sco pe d slot 来自定义表头

一、render–head e r 方式

场景：给表头设置自定义按钮，点击时候批量下载或做其他事件

给当前的那列设置 :render–head e r

          &lt;el-table-column align="center" :render-header="(h, obj) =&gt; renderHeader(h, obj, '你的参数')" width="155"&gt;
            &lt;template slot-scope="scope"&gt;
              
            &lt;/template&gt;
          </el-table-column&gt;

methods 设置事件

    // 自定义表头
    renderHeader (h, { column, $index }, type) {
      console.log('列表加载就会触发', h, { column, $index }, type)
      let that = this
      // 逻辑是 h() 括号里包裹标签 第一个参数是标签名 第二个是属性  第三个是标签内容  如果是多个标签需要包裹数组
      return h(
        'div', [
        // 列名称
        h('span', column.label),
        // 按钮
        h('el-button', {
          props: {
            type: 'primary',
            size: 'small',
          },
          style: 'color:#fff;',
          // class: "{ active: showSelectMore }",
          // class: 'className',
          on: {
          	// 各种事件触发
            click: function () {
              that.clickButton(type)
            }
          }
        }, '批量下载保单发票')
      ],
      )


    },
    // 按钮点击事件
    clickButton (type) {
      console.log('我点击了' + type + '的列')
      // this.downLoad()
    },

二、Sco pe d slot 方式

element-ui自定义表头链接

注意：el-table-column 需要去掉 label和prop 属性然后使用插槽 slot

三、实例：多选

        <el-table-column width="120"&gt;
          <template slot="header" slot-scope="scope">
            <!-- 必须有这个scope 否则多选框不渲染 -->
            <span>退回保费凭证</span>
            <el-checkbox v-model="allCheckFlag" @change="changeAllsect($event)"></el-checkbox>
          </template>

          <template slot-scope="scope">
              <span style="display: inline-block;float: right;margin-top:15px;">
                <el-checkbox v-model="scope.row.selectUploadFlag" @change="changeSelect"></el-checkbox>
              </span>
          </template>
        </el-table-column>







    changeAllsect (event) {
      console.log(event)
      this.$nextTick(() => {
        this.allCheckFlag = event
      })
      if (this.allCheckFlag) {
        this.tableData2.forEach(ele => {
          ele.selectUploadFlag = true
        })
      } else {
        this.tableData2.forEach(ele => {
          ele.selectUploadFlag = false
        })
      }
    },
    changeSelect () {
      let flag = false
      this.tableData2.forEach(ele => {
        if (ele.selectUploadFlag) {
          flag = true
        }
      })

      // 当没有一个是选中时候 清空最上方选中
      if (flag == false) {
        this.allCheckFlag = false
      }
    },