自定義表頭有兩種方式：一種是使用render-header 一種是通過設(shè)置 Scoped slot 來自定義表頭

一、render-header方式

場(chǎng)景：給表頭設(shè)置自定義按鈕，點(diǎn)擊時(shí)候 批量下載或做其他事件

給當(dāng)前的那列設(shè)置 :render-header

          <el-table-column align="center" :render-header="(h, obj) => renderHeader(h, obj, '你的參數(shù)')" width="155">
            <template slot-scope="scope">
              
            </template>
          </el-table-column>

methods設(shè)置事件

    // 自定義表頭
    renderHeader (h, { column, $index }, type) {
      console.log('列表加載就會(huì)觸發(fā)', h, { column, $index }, type)
      let that = this
      // 邏輯是 h() 括號(hào)里包裹標(biāo)簽 第一個(gè)參數(shù)是標(biāo)簽名 第二個(gè)是屬性  第三個(gè)是標(biāo)簽內(nèi)容  如果是多個(gè)標(biāo)簽需要包裹數(shù)組
      return h(
        'div', [
        // 列名稱
        h('span', column.label),
        // 按鈕
        h('el-button', {
          props: {
            type: 'primary',
            size: 'small',
          },
          style: 'color:#fff;',
          // class: "{ active: showSelectMore }",
          // class: 'className',
          on: {
          	// 各種事件觸發(fā)
            click: function () {
              that.clickButton(type)
            }
          }
        }, '批量下載保單發(fā)票')
      ],
      )


    },
    // 按鈕點(diǎn)擊事件
    clickButton (type) {
      console.log('我點(diǎn)擊了' + type + '的列')
      // this.downLoad()
    },

二、Scoped slot 方式

element-ui自定義表頭鏈接

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

三、實(shí)例：多選

文章來源地址http://www.zghlxwxcb.cn/news/detail-510633.html

        <el-table-column width="120">
          <template slot="header" slot-scope="scope">
            <!-- 必須有這個(gè)scope 否則多選框不渲染 -->
            <span>退回保費(fèi)憑證</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
        }
      })

      // 當(dāng)沒有一個(gè)是選中時(shí)候 清空最上方選中
      if (flag == false) {
        this.allCheckFlag = false
      }
    },

到了這里，關(guān)于element-ui自定義表頭；el-table自定義表頭；render-header自定義表頭的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！