最近项目需要实现可编辑的动态多级表头表格，看了两天的文章，始终没有找到我想要的效果，在了解了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 (/\(("text-align: center">
总结
