相思资源网 Design By www.200059.com
最近项目需要实现可编辑的动态多级表头表格,看了两天的文章,始终没有找到我想要的效果,在了解了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">
总结
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无vue+render+jsx实现可编辑动态多级表头table的实例代码的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
