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.效果图

posted @ 2019-11-19 14:53  曾经的水哥  阅读(2705)  评论(0编辑  收藏  举报