ElementUI的Table-column_render-header自定義表頭

ElementUI的Table表格,官方網站上提供了不少樣式,可是在平常開發中還會碰到各類狀況,顯然官方提供的是不能知足需求的。那麼,咱們就根據本身的需求對table進行改造。git

先丟出關於Table的官方文檔的傳送門,請戳這裏→ http://element-cn.eleme.io/#/...
官方對Table相關的Attributes介紹的不是很詳細,對於不太熟悉人,很難搞明白,實際操做起來很難受。github

下面就關於Table-columnrender-header的運用,稍做說明,具體請移步此項目文件中查看(文章最下面有傳送門)。網站

參數 說明 類型 可選值 默認值
render-header 列標題 Label 區域渲染使用的 Function Function(h, { column, $index })

1、自定義表頭樣式

自定義表頭樣式

renderHeaderOne (h, { column, $index }) {
  return h('span', [
    h('span', column.label),
    h('span', {
      class: 'errorIcon',
      on: {
        click: () => {
          console.log(`${column.label}   ${$index}`)
        }
      }
    })
  ])
}

2、自定義表頭樣式和整列的拖動

自定義表頭樣式和整列的拖動

renderHeader (h, { column, $index }) {
  // 這裏能夠根據$index的值來對自身需求進行修改,
  return h('span', {
    'class': ['thead-cell'],
    on: {
      mousedown: ($event) => { this.handleMouseDown($event, column) },
      mouseup: ($event) => { this.handleMouseUp($event, column) },
      mousemove: ($event) => { this.handleMouseMove($event, column) }
    }
  }, [
    h('span', [
      h('span',
        {
          class: $index === 0 ? 'el-icon-star-off' : $index === 1 ? 'el-icon-time' : $index === 2 ? 'el-icon-location' : '',
          style: {
            // marginLeft: ''
          },
          on: {
          }
      }),
      h('span', column.label)
    ]),
    h('span', {
      'class': ['virtual']
    })
  ])
}

DEMO傳送門,請戳這裏→ https://github.com/Darkerxi/E...this

相關文章
相關標籤/搜索