欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

elementui 自定义表头 renderHeader的写法 给增加el-tooltip的提示

程序员文章站 2022-03-23 08:44:31
1.html

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

elementui 自定义表头 renderHeader的写法 给增加el-tooltip的提示