el-table自定义label 使用h函数绑定事件和数据

最新推荐文章于 2025-06-06 17:41:08 发布

放飞@wlg

最新推荐文章于 2025-06-06 17:41:08 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： h函数文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/wang15180138572/article/details/114631467

h函数专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue中使用自定义渲染函数实现表格头部组件的功能，包括在头部展示日期选择器并绑定数据及事件，以及自定义标签提示文字的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在render-header 上显示 el-date-picker 并实现数据、事件绑定
:render-header=“renderHeader”
在这里插入图片描述

 renderHeader(h, { column, $index }) {
      var self = this
      return h('div', { class: 'class1' },
        [
          h('el-date-picker', {
            props: {
              type: 'date',
              format: 'yyyy-MM-dd',
              valueFormat: 'yyyy-MM-dd',
              placeholder: '选择日期',
              pickerOptions: self.pickerOptions
            },
            domProps: {
              value: self.value2
            },
            attrs: {
              value: self.value2 // 处理默认显示的,
            },
            style: {
              backgroundColor: 'red',
              fontSize: '14px'
            },
            event: {
            },
            on: {
              input: function(event) {
                self.value2 = event
              },
              change: (e) => {
                self.value2 = e
              },
              blur(e) {
              }
            }
          }),
          h('i', {
            class: 'el-icon-refresh-right',
            style: {
              paddingLeft: '15px'
            },
            on: {
              '!click': self.refreshData
            }
          }
          )
        ]
      )
    },
    refreshData() {
      console.log('刷新数据')
    },```

2、自定义label 提示文字

renderHeader (h, { column }) {  
      let serviceContent = [
        h(
          'div',
          {
            slot: "content",
          },
          "测试"
        )
      ]
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              placement: "top"
            }
          },
          [
            serviceContent,
            h("i", {
              class: "el-icon-question",
              style: "color: #ffd737;font-size: 16px;margin-left: 10px"
            })
          ]
        )
      ]);
    }