当前位置： 移动技术网 > IT编程>开发语言>JavaScript > elementui 自定义表头 renderHeader的写法 给增加el-tooltip的提示

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

2019年11月20日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网