The Table component in Element’S UI is very powerful, but in real life development, when you encounter custom header styles, you need to use the renderHeader function
<el-table-column
  label="Data"
>
</el-table-column>
Copy the code
The original style can only be a custom label, as shown below, with only Data in the header

The date needs to be moved to the top of the table, the first row shows the date, the second row shows the day, weekend highlighted

RenderHeader (renderHeader) {renderHeader (renderHeader) {renderHeader (renderHeader) {renderHeader (renderHeader) {renderHeader (renderHeader) {renderHeader (renderHeader) {renderHeader (renderHeader) {renderHeader (renderHeader); [{year:’2021-01′,days:[’10’,’11’]}], {year:’2021-01′,days:[’10’,’11’]}
<el-table-column
  label="Data"
  :render-header="renderHeader"
>
</el-table-column>

renderHeader(h, { column }) {
  return h('div', { id: 'h-id'},this.endDate.map((val, key) = > {
      return h('span',
        {},
        [h('span', val.year)])
    }),
    h('div', { id: 'h-id'},this.endDate.map((val, key) = > {
        return val.days.map((item, index) = > {
          return h('span',
            { class: 'rendercolor'},
            [h('span', item)])
        })
      })
    ])
  ])
}
Copy the code

Render (function)

Vue recommends using templates to create your HTML in most cases. However, in some scenarios, you really need the full programming power of JavaScript. In this case you can use render functions, which are closer to the compiler than templates.
To put it simply, in Vue we use template HTML syntax to build the page, using the Render function we can use Js language to build the DOM.
Before diving into rendering functions, it’s important to know a little bit about how browsers work. Take the following HTML for example:
<div>
  <h1>My title</h1>Some text content <! -- TODO: Add tagline --> </div>Copy the code
When the browser reads the code, it creates a tree of “DOM nodes” to keep track of everything, just as you would draw a family tree to track the progress of family members.
The DOM node tree corresponding to the above HTML is shown in the figure below:

To generate a label, we can
<h1>{{ blogTitle }}</h1>
Copy the code
You can also
render: function (createElement) {
  return createElement('h1'.this.blogTitle)
}
Copy the code
CreateElement collision with Render
// @returns {VNode}
createElement(
  // {String | Object | Function}
  // An HTML tag name, component option object, or
  Resolve an async function of any of the above. Required fields.
  'div'.// {Object}
  // A data object corresponding to the attribute in the template. Optional.
  {
    // (see next section for details)
  },

  // {String | Array}
  // Child virtual nodes (VNodes), built from 'createElement()',
  // You can also use strings to generate "text virtual nodes". Optional.
  [
    'Write some words first.',
    createElement('h1'.'A headline'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'}})])Copy the code
Almost all code conventions are the same as for direct template writing, including click events, but v-if cannot be written directly inside the tag
<el-table-column
  label="Data"
  :render-header="renderHeader"
  v-if="kaqi==996"
>
</el-table-column>
Copy the code
In the above example, once the renderHeader has been rendered, it cannot be hidden, and can only be used in the render function for judgment purposes, as shown below
<el-table-column
  label="Data"
  :render-header="renderHeader"
>
</el-table-column>

renderHeader(h, { column }) {
  if(this.kaqi === 996) {return h('div', { id: 'h-id'},this.endDate.map((val, key) = > {
        return h('span',
          {},
          [h('span', val.year)])
      }),
      h('div', { id: 'h-id'},this.endDate.map((val, key) = > {
          return val.days.map((item, index) = > {
            return h('span',
              { class: 'rendercolor'},
              [h('span', item)])
          })
        })
      ])
    ])
  }else {
     console.log('Please give me a thumbs up. Thank you.')}},Copy the code