最近項目需要實現(xiàn)可編輯的動態(tài)多級表頭表格，看了兩天的文章，始終沒有找到我想要的效果，在了解了render+jsx的基礎用法后，自己基于element-ui封裝了一個，數(shù)據(jù)格式參考element-ui table的數(shù)據(jù)。實現(xiàn)如下：

1.scoresTable

<script> import scoresColumn from './scoresColumn'; export default { components: { scoresColumn }, render: function(h) { return <div className='table-control'><el-table ref='table' size='small' {...{attrs: {data:this.tableData}}} border> { this.tableTitles.map(title => { return <scoresColumn on-dataChange={this.dataChange} {...{attrs: {column:title,unitScores: this.unitScores}}}></scoresColumn> }) }</el-table> </div>; }, props: { tableTitles: {type: Array,default: () => [] }, tableData: {type: Array,default: () => [] }, unitScores: {type: Object,default: () => {} } }, methods: { dataChange(id) {this.$emit(’dataChange’, id); } }, }</script><style> .el-table th, .el-table td { text-align: center; }</style>

2.scoresColumn

<script> export default { data() { return { style: { ’min-width’: '70', ’resizable’: true, ’show-overflow-tooltip’: true }, } }, props: { column: { type: Object }, unitScores: { type: Object, default: () => {} } }, name: 'scoresColumn', render: function (h) { let scopedSlots = {default: (scope) => { let col = scope.column.property; let value = scope.row[col]; return <div id={col+scope.$index} > <p onClick={this.clickHandle}>{value}</p> </div>;} }; if (this.column.children === undefined)if (this.column.label == ’序號’ || this.column.label == ’姓名’) { return <el-table-column fixed {...{style: this.style, scopedSlots: {default: (scope) => { let value = scope.row[scope.column.property]; return <p>{value}</p>;} }}} prop={this.column.prop} label={this.column.label}> </el-table-column>}else { return <el-table-column {...{style: this.style, scopedSlots: {default: (scope) => { let value = scope.row[scope.column.property]; if (/((?=d)|(^總計$)/g.test(this.column.label)) { let col = scope.column.property; return <div id={col+scope.$index} > <p onClick={this.clickHandle}>{value}</p> </div>; }else return <p>{value}</p>;} }}} prop={this.column.prop} label={this.column.label}> </el-table-column>} let buildTitles = (childList) => {let children = [];childList.map(child => { if (child.children != undefined && child.children.length > 0) { children.push(<el-table-column {...{style: this.style}} label={child.label}> {buildTitles(child.children)} </el-table-column>) } else { children.push( <el-table-column {...{style: this.style, scopedSlots: scopedSlots}} label={child.label} prop={child.prop}> </el-table-column>) }});return children; }; return <el-table-column{...{style: this.style}}label={this.column.label}prop={this.column.prop}>{buildTitles(this.column.children)} </el-table-column>; }, methods: { blurHandler(e) {let parent = e.target.parentNode;let child = parent.firstElementChild;let p = document.createElement(’p’);let value = child.value.match(/^d*(.{1}d+)?/)[0];if (value == ’’ || value == null) { value = 0;}p.innerHTML = value;p.addEventListener(’click’, this.clickHandle, false);child.replaceWith(p);this.$emit(’dataChange’, parent.id); }, clickHandle(e) {let parent = e.target.parentNode;let child = parent.firstElementChild;let input = document.createElement(’input’);input.style.lineHeight = ’23px’;input.style.textAlign = ’center’;input.style.fontSize = ’12px’;input.style.height = ’23px’input.style.width = ’100%’;input.value = child.innerHTML;input.addEventListener(’blur’, this.blurHandler, true);input.addEventListener(’keyup’, this.keyUpHandler, false);child.replaceWith(input);input.focus(); }, keyUpHandler(e) {let input = e.target;let parent = input.parentNode;let property = parent.id.replace(/d/g, ’’);let value = input.value.replace(/[^d.]/g,’’);if (Math.min(this.unitScores[property],value) != value) { value = this.unitScores[property];}input.value = value; } } }</script><style scoped></style>

3.實現(xiàn)效果

總結

到此這篇關于vue+render+jsx實現(xiàn)可編輯動態(tài)多級表頭table的文章就介紹到這了,更多相關vue render jsx 多級表頭table內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！