在作管理後臺開發的時候會碰到這樣的一個需求,這個表格展現的數據太長了,用戶想加個篩選管理這個表格長度。
相似截圖:微信
而element在table組件中有提供render-header這個方法。dom
廢話很少說直接上代碼ui
renderHeader(h, obj) { if (obj.column.label == '操做') { return h('div', {}, [ h('el-popover', { props: { placement: "bottom", width: "150", trigger: "click", }, }, [ h('span', { slot: 'reference', class: 'ces-table-require', domProps: { innerHTML: obj.column.label + '<i class="el-icon-s-tools pl10"/>' } }), h('el-checkbox-group', { class: 'bdb_m20', style: { 'margin-bottom': '10px', 'border-bottom': '1px solid #efefef', 'padding-bottom': '10px' }, props: { 'value': this.check, }, }, [ this.checkList.map((item, index) => { return h('el-checkbox', { props: { label: item.label, 'true-label': item.label, key: index, disabled: index == this.checkList.length - 1 ? true : false, checked: this.check[index] == item.label ? true : false }, on: { change: val => { if (val) { this.check.push(item.label) this.check = [...new Set(this.check)] } else { let i = this.check.findIndex(row => row == item.label) this.check.splice(i, 1) } } }, }) }) ]), h('el-button', { props: { size: "mini" }, on: { click: _ => { this.check = [] this.$parent.tableCols = this.checkList } }, domProps: { innerHTML: '復原' } }), h('el-button', { props: { size: "mini", type: "primary" }, on: { click: _ => { let arr = this.tableCols.filter(item => !this.check.some(ele => ele === item.label)) this.$parent.tableCols = arr } }, domProps: { innerHTML: '隱藏' } }) ]) ]) } else { return h("span", {}, obj.column.label) } },