ElementUI的Table表格,官方網站上提供了不少樣式,可是在平常開發中還會碰到各類狀況,顯然官方提供的是不能知足需求的。那麼,咱們就根據本身的需求對table進行改造。git
先丟出關於Table的官方文檔的傳送門,請戳這裏→ http://element-cn.eleme.io/#/...
官方對Table相關的Attributes介紹的不是很詳細,對於不太熟悉人,很難搞明白,實際操做起來很難受。github
下面就關於Table-column中render-header的運用,稍做說明,具體請移步此項目文件中查看(文章最下面有傳送門)。網站
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
render-header | 列標題 Label 區域渲染使用的 Function | Function(h, { column, $index }) | — | — |
renderHeaderOne (h, { column, $index }) { return h('span', [ h('span', column.label), h('span', { class: 'errorIcon', on: { click: () => { console.log(`${column.label} ${$index}`) } } }) ]) }
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