vue+render+jsx實現可編輯動態多級表頭table的實例代碼

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

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.實現效果

總結

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