elementui 自定義表頭 renderHeader的寫法 給增長el-tooltip的提示

1.html

<el-table-column prop="taxes" :render-header="renderHeader" width="180">
    <template slot-scope="scope">{{scope.row.taxes}}</template>
</el-table-column>

2.js

    renderHeader(h, { column, $index }) {
      // console.log(column, $index)
      // console.log(this.addedValueTaxRate, this.additionalTaxRate)
      let addedValueTaxRate = this.addedValueTaxRate // 6
      let additionalTaxRate = this.additionalTaxRate // 0.8
      return [
        '稅費',
        h(
          'el-tooltip',
          {
            props: {
              content: (function() {
                return `含增值說${addedValueTaxRate}%,附加稅${additionalTaxRate}%`
              })(),
              placement: 'top'
            }
          },
          [
            h('span', {
              class: {
                'el-icon-question': true
              }
            })
          ]
        )
      ]
    }

3.親測有效，在代碼中正在使用

4.效果圖