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"
            })
          ]
        )
      ]);
    }
Logo

前往低代码交流专区

更多推荐