需求
1.表头数据不固定
2.表头数据多层级
3.表格跨行跨列
4.表格可编辑
5.编辑支持基本表单框
子组件代码
dynamic-header.vue
{{title}}
{{getTemplate(item.template,scope)}}
{{scope.row[item.tableFiled]}}
h1{
color: black !important;
text-align: center;
padding: 20px;
}
table{
margin-top: 20px;
}
.tableClass{
::v-deep .el-table__fixed{
height: 100% !important;
//设置高优先,以覆盖内联样式
}
}
table-column.vue
{{getTemplate(item.template,scope)}}
{{scope.row[item.tableFiled]}}
父组件
【vue+element 动态表格组件】list为表格数据,tableHeader为表头数据
推荐阅读
- 前端开发|前端开发( 路由跳转页面详解)
- vue|超级详细的Vue-cli3使用教程
- 项目|若依Ruoyi-Vue学习笔记
- vue中easyplayer使用
- elementui|java基于Springboot+vue的宠物销售商城网站 elementui
- elementui|基于Springboot+vue的化妆品美妆销售商城网站 elementui
- elementui|基于Springboot+vue的体用用品销售商城网站 elementui
- Vue|Vue第五天学习总结——Vue全家桶之前端工程化(模块化相关规范、webpack、Vue单文件组件、Vue脚手架、组件库——Element-UI 的基本使用)
- vue|vue-cli项目的webpack打包优化